I have a circular div with the following css:
z-index: 9999;
position: absolute;
transform: translate(-50%,-50%);
height: 150px;
width: 150px;
border-radius: 50%;
pointer-events: none;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
How can I add an (opacity?) gradient to this div to make the blur end less abruptly
>Solution :
Something like this:
body,
html {
margin: 0px;
padding: 0px;
background-color: #000;
width: 100%;
}
h1 {
color: #fff;
font-size: 80px;
line-height: 120px;
text-align: center;
}
.blur-mask {
z-index: 9999;
position: absolute;
top: 50px;
left: calc(50% - 75px);
height: 150px;
width: 150px;
border-radius: 50%;
pointer-events: none;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
-webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}<h1>LOREM</h1>
<div class="blur-mask"></div>