WEBデザイン自由帳 WEBデザイン自由帳

ABOUT ME

wentertainment logo @Eiju Web Designer/Engineer
Twitter icon Instagram icon
本サイトに掲載しているコードや画像は全てフリー素材として公開しております。私用商用問わず、ご自由にお使いください。
なお、本サイト内で紹介している外部のライブラリ等につきましては、提供元のサイトにて使用許諾等をご確認ください。
CSS関係

すりガラスのような表現（グラスモーフィズム）を実現するコード（CSS-Only）

更新日：2023.2.10

See the Pen Untitled by Wentertainment (@wenterme) on CodePen.

  • すりガラスのような表現（グラスモーフィズム）を実現するコード。
  • 透明度のある背景色を持った要素に対して、「backdrop-filter: blur(○px);」を指定すればOK！
  • ベンダープレフィックスはSafari用（2023/2 現在）
  • blur値が高いほどぼやぼやになる。
TOPページにもどる