コンテンツにスキップ

CSSグラスモーフィズム生成

CSSグラスモーフィズム(すりガラス効果)をライブプレビューで生成。ぼかし、不透明度、背景色、ボーダー、シャドウを調整。CSSコードをコピー。無料、100%ブラウザで動作。

プレビュー

Glassmorphism
10px
20%
30%

CSS出力

 

グラスモーフィズムとは?

グラスモーフィズムは、すりガラスのような半透明の効果を持つUIデザインスタイルです。backdrop-filter: blur()を使用して背景をぼかし、半透明の背景色と微妙なボーダーを組み合わせて、ガラスのような外観を作り出します。

ブラウザサポート

backdrop-filterは主要な最新ブラウザすべてでサポートされています。Chrome、Edge、Safari、Firefoxの最新版で利用可能です。古いブラウザ向けには、@supportsルールを使って半透明の背景色にフォールバックすることを推奨します。

プライバシー

すべての生成処理はブラウザで100%実行されます。データはサーバーに送信されません。