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
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🙏🏽
something like this ?
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:
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
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🙌🏽
Forked your pen. Working for me on both Chrome and Firefox. Have a look: https://codepen.io/jsnkuhn/pen/MWzeLeB?editors=0110
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!
Easy enough to replace the
linear-gradient with a radial-gradient: Lol…can’t believe I didn’t realize that…