グラスモーフィズムCSSジェネレーター
グラスモーフィズム・すりガラス調の背景を実装するためのCSSを生成します。
不透明度やぼかし(blur)の値などを柔軟に変更可能。
出力されるCSSコードをコピペで簡単に使えます。
スポンサーリンク
カスタマイズ
プレビュー
CSSコード
.glass {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}使用上の注意
- モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
- 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。
スポンサーリンク
