Complex Figma gradient bgCSS
Hey good folks, hope y'all enjoying family time.
Ok so I have this complex gradient made up with all different kind of vectors and shapes (image attached and youtube video attached as it wouldn't let me upload it here due to size limitations)
https://youtu.be/PcZ7Zpruz7Y
My question is what would be the ideal and best approach here?
- trying to recreate the whole hero using css gradients, which seems impossible lol
- using an svg for better resolution and control
- using a png or jpeg bg (least favorable solution)
What's your ideal approach when faced with such gradients.
kindly watch the video till end to have a good idea on the complexity of the gradient background
umwebdev
YouTube
complex gradient
Hey good folks, hope y'all enjoying family time.
Ok so I have this complex gradient made up with all different kind of vectors and shapes (video attached)
My question is what would be the ideal and best approach here?
- trying to recreate the whole hero using css gradients, which seems impossible lol
- using an svg for better resolution and...
7 Replies
If you cannot reconstruct this with a CSS gradient, using an SVG will also not help, unless you figure out what the shape is supposed to be and apply a blur to it. Otherwise, you have to just make the gradient in the SVG, and you would have the same problem. The quality loss of png or jpg is not a problem for this specific image because it has no clear details. Enlarging causes blurring, but it's already a blurry pattern, so the additional blur will be completely unnoticeable.
I can export the whole background layer as an svg from figma directly, that'll be exactly the same as in the design.
In that case, why are you trying to figure out how to create it? Just use that.
Just trying to find if that's the ideal approach in such scenario or is one expected to be sweating on creating such complexities in css
When an asset is accessible and usable, just use it. Only reconstruct it if there is some kind of problem with using the version that is available, and charge extra for that work.
in this case i wonder what would be better. when i look at all those layers with (almost?) all having a layer blur and some of them being a gradient on its own. I think using a static image would perform better than letting svg calculate it all
It depends how specific you are looking to be about the image. It looks like a few overlayed radial gradients can get pretty close: https://codepen.io/jsnkuhn/pen/RNbVdyw?editors=1100
But if you need/want it to be exact then the image is the way to go. That PNG though is almost 1mb which is pretty large for this sort of thing. Would look into a losssy image format like jpg, webp, or avif instead. They'd be MUCH smaller file sizes with very little change to the image.