Advanced background coloring help
My designer gave me a landing page in Figma, and as you can see in the picture, there are seemingly random opaque/blurred purple blob elements scattered throughout the white background.
Any ideas on how to accomplish this with responsiveness in mind?
Thanks 🙂
6 Replies
this looks like an svg with a mesh gradient. you can make something like this in adobe illustrator (or another vector program) and set it as your background, which should scale appropriately because svg.
Idk how good browser support is for mesh svgs tho.
or actually you could probably export the svg directly from figma if you copy it into its own file
you can use svg or normal img tags
i imagine the assets are available in figma. I think the question is how to position them on the page?
wouldn't it just be background: url(path) and then background-size:cover from that point?
unless it's multiple svgs, in which case you could collapse them into one image in illustrator (or a similar vector editor)
Hey thanks for the ideas, yea I tried just downloading the whole thing as a background svg and it worked fine on desktop but it got all funky when I went to mobile
I actually ended up just doing it the hard way and absolutely positioning them all and adding media queries lol...
I think you can keep the background elements and the the blurred logo as seperate components
Just apply the gradient as a background, and then absolute position the blurred logo