XDの背景のぼかしをCSSで再現
【XD 背景のぼかし】
ぼかし量：30
明るさ：20
効果の不透明度：50
XDで上記のような設定のオブジェクトがある場合、次のようにCSSを書くとうまく反映できると思います。
.container{
position: relative;
width: 100%;
height: 100vh;
background: rgba($color: #fff, $alpha: .5);
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
backdrop-filter: blur(30px) brightness(1.2);
-webkit-backdrop-filter: blur(30px) brightness(1.2);
}
}疑似要素にぼかし量と明るさをbackdrop-filterで設定し、親要素に背景色と透過率を設定するといいですね。
