▢

グラスモーフィズムジェネレーター

blur、透明度、彩度、ティントカラーを使ってすりガラス風のカード CSS を作成します。

ファイルはこの端末に残ります

ファイルはブラウザ内で処理され、アップロードされません。ツールの実行に必要なコードと素材はダウンロードされます。アカウントも追跡もありません。

ダウンロードを使うと、このツールを1つのHTMLファイルに保存してオフラインで使えます。

blur: 10px

透明度: 0.25

彩度: 180%

ティント

結果

出力

このツールについて

blur、透明度、彩度、ティントを調整してすりガラス風のカードをデザインし、その CSS をコピーできます。すべてブラウザ内で完結します。

なぜプレビューはグラデーションの上にあるのですか？

グラスモーフィズムはカラフルな背景に依存しており、それによってカードの背後の blur と透明度が見えるようになります。

backdrop-filter は何をしますか？

要素の背後にあるものをぼかして彩度を上げ、すりガラスのような効果を生み出します。