こんな方におすすめ
- 重ねるパネルを設計するデザイナー
- ガラス風カードを実装する開発者
Developer Design Utility
ガラス風CSS生成ツール
透明度、backdrop blur、ボーダー、radius、シャドウを調整し、ガラスのような質感の Glassmorphism CSS をリアルタイムプレビュー付きで作成できます。
Glass UI 作成
半透明背景と blur 効果を組み合わせてガラス風 UI カードを作成できます。
リアルタイムプレビュー
Opacity、Blur、Border、Radius、Shadow の値が即座にプレビューへ反映されます。
CSS コードコピー
完成した Glassmorphism CSS をコピーしたり CSS ファイルとしてダウンロードできます。
Blur
18px
Opacity
22%
Border
34%
Radius
28px
STEP 1
Glassmorphism 設定
背景色、透明度、blur、saturation、ボーダー、シャドウを調整して理想のガラス効果を作成しましょう。
ガラスカードの基本背景色です。白は定番の Glass UI、カラーはアクセントカードに適しています。
0%
22%
100%
0px
18px
40px
100%
160%
220%
0%
34%
100%
0px
28px
60px
0%
18%
80%
16px
32px
64px
Live Preview
Glass UI
Glassmorphism Card
透明なガラス質感と blur 効果をリアルタイムで確認できます。
Blur
18px
Opacity
22%
Radius
28px
STEP 2
おすすめプリセット
カード、バナー、モーダル、ダーク背景 UI によく使われる Glassmorphism スタイルを素早く適用できます。
基本 Glass UI
カラー Glass UI
特殊スタイル
STEP 3
待機中
生成結果
以下のコードは CSS ファイル、コンポーネントスタイル、またはインラインスタイルで使用できます。
設定を選択し、「CSS コード生成」ボタンを押してください。
背景上で読めるガラス風パネルを作る
半透明パネルを見ながら、ぼかし、彩度、枠線、影のCSSを生成します。背景フィルターが使えない場合には、不透明度を高めた代替背景を出力します。
活用場面
- 模様のある背景にカードを重ねる。
- フィルターと代替背景を比較する。
入力から結果の確認まで
- 1
3桁または6桁の有効なHEX色を選びます。
- 2
文字が読める不透明度から調整します。
- 3
背景を見ながらぼかしと彩度を変えます。
- 4
枠線、角丸、影、余白を設定します。
- 5
CSSを書き出し、実際の背景、代替表示、対象端末で確認します。
明るいパネル
- 入力
- #ffffff、不透明度22%、ぼかし16px
- 結果
- 半透明の白背景とblur(16px)を出力します。
読みやすさは背後の画像にも左右されます。
フィルター非対応
- 入力
- backdrop-filter非対応環境で生成CSSを適用
- 結果
- @supportsの代替背景がより不透明になります。
面は見えるようになりますが、文字とのコントラストは確認が必要です。
計算・処理の仕組み
HEXをRGBAに変換し、ぼかし・彩度、枠線、角丸、影、余白を組み合わせます。backdrop-filter、WebKit接頭辞付きの指定、非対応時の代替ルールを生成します。
注意点と制限
- 単色の背景ではぼかしがほとんど見えない場合があります。
- 広いフィルター領域や動く背景は描画負荷を増やす場合があります。
- 実際の背景全体に対する文字のコントラストは測定しません。
データの取り扱い
色と設定はブラウザー内で処理します。
参考資料
あわせて使えるツール
- カラーパレット生成ツール
ブランド色の明暗をそろえる。
- CSSアニメーション生成ツール
要素を一度だけフェード表示する。
よくある質問
ぼかしが見えないのはなぜですか？
パネルの背後にあるものをぼかします。模様のある背景と半透明の色で比較してください。
強くぼかせば読みやすくなりますか？
必ずしもそうではありません。不透明度、文字色、背景画像も関係します。
代替ルールを削除できますか？
フィルター非対応でも読めるよう、維持するか用途に合わせて調整してください。