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 🙂
No description
6 Replies
kat schrodinger
kat schrodinger•14mo ago
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
ABK | Muneer
ABK | Muneer•14mo ago
you can use svg or normal img tags
MarkBoots
MarkBoots•14mo ago
i imagine the assets are available in figma. I think the question is how to position them on the page?
kat schrodinger
kat schrodinger•14mo ago
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)
Jonny
JonnyOP•14mo ago
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...
Senra
Senra•14mo ago
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
Want results from more Discord servers?
Add your server