I'm looking for the solution of combining the backdrop-filter:blur(XXpx) with a wavy border. See the image attached image.
I've already tried SVG waves and:before:after ellipses but this seems to me it is not impossible to pair it with "blur".
Does anyone have any hints?
This piece of code makes a straight line on top of "blur cover":
#css
.blur-filter-over {
position: absolute;
height: calc(100vw*0.105);
max-height: 230px;
width: 100%;
background: linear-gradient(180deg, rgba(70, 60, 92, 0.33) 0%, rgba(96, 96, 96, 0) 100%);
backdrop-filter: blur(10px);
border: unset;
left: 0;
bottom: 0;
}
#html
<div class="card card-body ls odd" style="background-image: url({{ MEDIA_URL }});">
<div class="blur-filter-over">
<div class="text-over talent">
<div class="text-over-place">{{address}}</div>
{{first_name}} {{last_name}}
</div>
</div>
</div>
From my previous answer you can do like below. I took one of the codes in that answer where I am using mask to create the wave.
.box { width:300px; height:250px; position:relative; background: url(https://picsum.photos/id/1069/400/600) center/cover; }.box:before{ content:""; position:absolute; inset:0; -webkit-mask: radial-gradient(100% 80% at top,#0000 79.5%,#000 80%) left, radial-gradient(100% 80% at bottom,#000 79.5%,#0000 80%) right; -webkit-mask-size:50.1% 100%; -webkit-mask-repeat:no-repeat; backdrop-filter:blur(10px); background:#0005; }
<div class="box"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.