I’m creating a website, which like Netflix has a video playing on the background, and the navigation bar is transparent, however I want it to be like Netflix’ navigation bar having a vignette type effect from the top.
Also, please suggest if there is a more effective method than using the vignette effect.
>Solution :
Sahil.
The most efficient way I can think to achieve this would be to set the background of your navbar to be a gradient.
You can make the gradient go from a slightly transparent black to totally transparent and that should create a vignette-style effect.
Try and apply the following style to your navbar (remove any other background styling):
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.6629026610644257) 0%, rgba(9,9,121,0) 57%);
If you wish to modify the transparency or colours, you can use CSSGradient to make gradients. Just make sure to set the angle to be 180deg and you should be good! 👍🏻
Hope this helped!