Issue
How can I make a smooth blur as smooth as a gradient from transparent to dark?
.img {
background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
background-size: cover;
background-position: center;
width: 500px;
height: 300px;
position: relative;
}
.img .shadow {
content: "";
height: 150px;
bottom: 0;
width: 100%;
position: absolute;
pointer-events: none;
left: 0;
background: linear-gradient( 360deg, rgb(0 0 0 / 100%) 0%, rgba(255, 255, 255, 0) 100%);
backdrop-filter: blur(10px);
}
<div class="img">
<div class="shadow"></div>
</div>
Solution
How about this?
I am not sure if I understood you question correctly.
Hover over it to see the different it makes.
.img {
background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
background-size: cover;
background-position: center;
width: 500px;
height: 300px;
position: relative;
}
.shadow {
height: 150px;
bottom: 0;
width: 100%;
position: absolute;
pointer-events: none;
backdrop-filter: blur(5px);
-webkit-mask: linear-gradient(transparent, black 80%);
border-right: 1px solid white;
transition: .5s ease-in-out;
}
.img:hover .shadow {
width: 0%;
}
<div class="img">
<div class="shadow"></div>
</div>
Answered By - BeanBoy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.