CSS Gradient Over Video
CSS Gradient Over Video
Out of context: Reply #7
- Started
- Last post
- 9 Responses
- shapesalad1
It's simples. Something like this:
<div id="container">
<div id="gradient"></div><div id="video"><video class="bgvideo" autoplay="" playsinline="" loop="" src="****.mp4"></video></div>
</div>in your css:
#container{
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
overflow: hidden;
}
#gradient{
grid-column: 1 / span 1;
grid-row: 1 / span 1;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%);
z-index: 2;}
#video{
grid-column: 1 / span 1;
grid-row: 1 / span 1;
align-self: stretch;
justify-self: right;
width: 100%;
display: inline-block;
z-index: 1;
}- essentially your video fills the 1x1 css grid container, and is a layer below the div that uses simple css gradient to draw the gradient you want.shapesalad
- use this: https://cssgradient.…shapesalad
- might have issues in safari though!! if you're going w/just two color points (same color but one set w/a transparency) you should be okayPonyBoy