CSS Glassmorphismジェネレーター について
ぼかし、透過、backdrop-filter制御でフロストガラスUIエフェクトを作成します。ブラウザ内で本番環境対応のCSSを生成します。
CSS Glassmorphismジェネレーター の使い方
- 1ぼかし量を調整してフロストガラスエフェクトの程度を制御します。
- 2ガラスレイヤーの不透明度とボーダー不透明度を設定します。
- 3背景色を選択し、ガラスティントの彩度を調整します。
- 4カラフルな背景の前にサンプルカードでエフェクトをプレビューします。
- 5CSS出力をコピーして要素に適用します。
ヒント
- Glassmorphismはガラス要素の後ろにカラフルまたは画像の背景がある場合に最も効果的です。
- クラシックなフロスト感にはぼかしを10-20pxに保ってください。ぼかしすぎるとガラスエフェクトが失われます。
- Safariでテストしてください。backdrop-filterは完全なクロスブラウザサポートのために-webkit-プレフィックスが必要です。
無料 vs 有料の制限
無料：基本コントロール。Starter以上：プレミアム機能。
OneKitTools チーム更新日 2.21.4