Css way to make this cool grid background design
I want to recreate this sites homepage css grid background design
12 Replies
can someone tell me what is best css way to doing this recreation of the background design of the hero section of this site
https://victorr.framer.website/#hero
I tried with svg but was too long of svg code
Then i tried making the grid be using linear gradient in a background image and the. Overlaying a radial gradient from color to transparent in the center to work as mask but that also is not looking the same cool as the original on site
The original site inspected and they just use an image and i dont like that solution since then making that responsive is not easy
So would like some help on this
I'm not sure how to make the radial gradient but why not do an
object-fit: cover on the grid image and then have the gradient on top of it?
I know it won't look perfect depending on how zoomed in the object-fit is but it should be pretty goodRadial gradient is the thing that was not working correctly on overlaying
I dont know why but my recreation does not look same enough as that site
https://somya-portfolio-creative.netlify.app/
Here is my recreation preview
GitHub
GitHub - RoboXGamer/Somya-Portfolio
Contribute to RoboXGamer/Somya-Portfolio development by creating an account on GitHub.
Unfortunately I don't know much about gradients so can't help π¦
And i just got to see another bug my recreation I still forgot to make responsive for mobile in the end π
Same for me
I always am bad at the gradients
I dont know how to make them look smooth
just inspect the code
it's the cookie cutter background you find on anything now-a-days, so, you will find many examples easily
I did inspect it but they are using an already masked image i said for it π
https://codepen.io/naprirfan/pen/xEvRae <-- you can adapt this
and then layer another background image with a radial background
Thank you very much! I had sent my code above and I was doing the same for the grid so yes the linear gradient on background for the grid works
Thank you very much! I will try this one out
this looks better than what mine currently is
Oh thanks for the idea of using repeating linear gradient instead of background repeat and putting the gradient in this same background only
Ok will try this