Dark Overlay on Hero section

Could someone help in getting this cool dark overlay done on Netflix homepage?? I initially had an image on the page but it won’t show up so I used a random image from the web… This is my code👇🏽 https://codepen.io/Creatorjihm/pen/LYXZBXe
9 Replies
Saagy
Saagy17mo ago
I would also like to get an assistance on the input so that it got that dark transparent background on it…Thanks in advance to my helper🙏🏽
Mannix
Mannix17mo ago
something like this ?
background: radial-gradient(transparent, black), url(https://picsum.photos/2000/1125?random=9) center center/cover;
background: radial-gradient(transparent, black), url(https://picsum.photos/2000/1125?random=9) center center/cover;
Jochem
Jochem17mo ago
alternatively linear-gradient(black, transparent, black) instead of the radial-gradient, with optionally extra stops linear-gradient(black, transparent 10%, transparent 90%, black) to push the darkening effect out more, or translucent black to still show the entire image linear-gradient(rgb(0 0 0 / 0.8), transparent, rgb(0 0 0 / 0.8)) (or combined of course) The background on the input is just something like this:
background: rgb(50 50 50 / 0.7);
background: rgb(50 50 50 / 0.7);
capt_uhu
capt_uhu17mo ago
i've used border-image for this in the past. As long as you don't need a border this has the plus of giving the intended effect but not getting in the way of the background-image code
border-image: 50% / 50% linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25));
border-image: 50% / 50% linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25));
Saagy
Saagy17mo ago
Thanks for this solution man! After implementing this code, it gave a very accurate result. It was also a great solution but from my observation, being linear, it made the effects show on straight line and not rounded. But honestly I saved this code as it will be helpful when I need it for a linear effect. Thanks man🙏🏽 I couldn’t implement this code… perhaps the code wasn’t imputed correctly…I tried to figure out why but I couldn’t.. All the same, Thanks for the help🙌🏽
capt_uhu
capt_uhu17mo ago
Forked your pen. Working for me on both Chrome and Firefox. Have a look: https://codepen.io/jsnkuhn/pen/MWzeLeB?editors=0110
Saagy
Saagy17mo ago
Okay will check it out and give feedback… thanks Hi bro, it finally worked here after trying the forked pen. Though it didn’t produce the accurate result… it somehow made the whole background dark without leaving some spaces to be light at the middle… Thanks for helping out all the same… From my observation, the radial gradient property seemed to be what I needed due to the creation of the circular shaped overlay but when it’s linear, it appears in a straight line!
capt_uhu
capt_uhu17mo ago
Easy enough to replace the linear-gradient with a radial-gradient:
border-image: 50% / 50% radial-gradient(transparent, black);
border-image: 50% / 50% radial-gradient(transparent, black);
Saagy
Saagy17mo ago
Lol…can’t believe I didn’t realize that…
Want results from more Discord servers?
Add your server