CSSすりガラス効果（グラスモーフィズム）
CSSグラスモーフィズム生成ツール
- 処理はすべてお使いのブラウザ内で行われ、ファイルが端末から送信されることはありません。
- 完全無料・登録不要・利用制限なし。
- モバイルを含む最新ブラウザで動作します。
About this tool
「CSSすりガラス効果（グラスモーフィズム）」は、CSS backdrop-filter・半透明ボーダー・奥行きシャドウを使ったモダンなすりガラスUIコンポーネントを、デザイナーやフロントエンド開発者が作成できるよう支援します。
How to use
- ぼかし半径・不透明度・枠線の太さ・枠線の不透明度を調整します。
- カラフルなメッシュグラデーションや暗い背景の上で、すりガラスカードをテストします。
- ベースカードの色味と角丸をカスタマイズします。
- 「CSSをコピー」をクリックして、クロスブラウザ対応のbackdrop-filterルールをコピーします。
FAQ
このCSSはSafariやモバイルブラウザで動作しますか？
はい！出力にはbackdrop-filterと-webkit-backdrop-filterの両方のベンダープレフィックスが含まれ、Safari・iOS・Chromiumで完全に動作します。
グラスモーフィズムとは何ですか？
背景のぼかし・半透明のレイヤー面・繊細なボーダー・鮮やかな背景とのコントラストが特徴のUIデザイントレンドです。