パラメータ
ぼかし 12px、不透明度 0.15、背景色 #ffffff
CSS
backdrop-filter: blur(12px); background: rgba(255,255,255,0.15);
デザインツール
Glassmorphism ジェネレーター - backdrop-filter CSS
blur、opacity、background color、border opacity を視覚的に調整し、-webkit prefix 付きの frosted-glass CSS を生成できます。カード、ナビバー、モーダルのレイヤー表現に便利です。
CSSGlassmorphismbackdrop-filter
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
Glassmorphism ジェネレーター
Glassmorphism
毛玻璃效果预览
12px
0.15
0.20
CSS 已生成。
利用シーン
- カードに半透明でぼかしたパネルを追加する
- ナビバーのガラス表現レイヤーを調整する
- 貼り付け可能な backdrop-filter CSS を出力する
使い方
- blur、opacity、background color、border opacity を調整する
- プレビューを確認する
- 生成された CSS をコピーまたは書き出す
入出力サンプル
FAQ
ブラウザ対応はどうですか？
backdrop-filter に対応した環境が必要です。このツールは標準プロパティと -webkit-backdrop-filter の両方を出力します。
css-glassmorphism との違いは何ですか？
こちらは blur、opacity、border などの基本設定を素早く生成する用途に特化しています。関連ツールでは追加のスタイル検討ができます。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS Box Shadow ジェネレーター
CSS Box Shadow ジェネレーター - 視覚的コントロール付き
offset、blur、spread、color、opacity、inset を視覚的に調整し、カード、ボタン、オーバーレイ向けの box-shadow CSS をライブ生成できます。
CSS 影 box-shadow
CSS グラデーションジェネレーター
CSS グラデーションジェネレーター - Linear、Radial、Conic
linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。
CSS グラデーション 背景
CSSグラスモーフィズム
CSSグラスモーフィズム - すりガラス風カード生成
color、opacity、blur、outline を調整し、backdrop-filter を使った frosted glass card の CSS を preview しながら生成できます。半透明 panel や nav layer の調整向けで、処理はすべてブラウザ内です。
CSS Glassmorphism backdrop-filter