すりガラスぽいデザインをCSSだけで実装する方法をご紹介します。
使い方によってはとってもおしゃれに使えるのでおすすめです！
まずはデモから！
See the Pen
Untitled by sayuri (@giraffeweb)
on CodePen.0
真ん中部分にのみすりガラスの装飾あたるように調整しています。
CSSはとっても簡単！
特定の要素に以下のCSSを充ててください。
すりガラスの色はbackgroundを触って頂ければ調整可能です。
重要なのはぼかし要素のblur。
これを忘れないようにしましょう！
#glass {
background: rgba(255,255,255,0.25);
box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);
backdrop-filter: blur(2.4px);
-webkit-backdrop-filter: blur(2.4px);
border-radius: 10px;
}
みなさんお試してみてね★