ガラスモルフィズムジェネレーター 幕背景のぼかしなど、透明度や彩度を調整して霧状ガラスのようなUIエフェクトを作成します。
ガラスモルフィズムジェネレーター
幕背景のぼかしなど、透明度や彩度を調整して霧状ガラスのようなUIエフェクトを作成します。
ガラスパラメータを調整
ぼかしの強度、不透明度、彩度、ボーダーの不透明度、影などを制御します。
グラデーション上でプレビュー
カラフルなグラデーションの背景の上でガラス効果を見てみましょう。
CSSをコピー
WebKit接頭辞付きの完全なガラスモーフィズムCSSをコピーします。
What Is ガラスモルフィズムジェネレーター?
Glassmorphism Generatorは、CSSのbackdrop-filterを使用して人気のある霧ガラスUIエフェクトを作成します。Glassmorphismは、半透明な背景と背景ぼかしが特徴的なデザイントレンドで、霧ガラスのような効果を生み出します。主な視覚要素は、後ろにあるコンテンツがぼかされた状態で表示される半透明な背景、定義のための繊細なボーダー、および奥行きのためのやや濃い影です。このツールでは、すべてのパラメータに対する微妙な制御を提供します: ぼかし強度、背景不透明度、彩度(ガラスを見通す色を強調)、ボーダーの不透明度、ボーダーレディウス、および影の不透明度。プレビューでは、グラス要素が鮮やかなグラデーション上に表示されるため、ぼかしと透過効果をはっきり見ることができます。生成されたCSSには、Safariとの互換性を持つためにwebkit接頭辞が含まれます。
Why Use ガラスモルフィズムジェネレーター?
-
ぼかし、不透明度、彩度、ボーダーに対する細かい制御
-
グラデーションの背景上でプレビューしてガラス効果を視覚化
-
Safariとの互換性のために-webkit-backdrop-filterが含まれています
-
影やボーダーレイアスを調整して完全なカスタマイズを行う
Common Use Cases
モダンUIカード
現代的なWebインターフェイス用のガラス効果を持つコンテンポラリーなカードを作成します。
ナビゲーションバー
ページコンテンツを後ろにぼかす霧吹きガラスのようなナビゲーションバーを作ります。
モーダル背景
モーダルオーバーレイにガラス効果を適用して、優雅で透明なダイアログを作成します。
サイドバー パネル
カラフルな背景と相性の良い半透明のサイドバーパネルを設計します。
Technical Guide
Glassmorphismは、backdrop-filter CSSプロパティ、特にblur()およびsaturate()関数に依存しています。backdrop-filterは、フィルタとは異なり、要素の後ろにある領域に効果を適用します。ぼかしが表示されるためには、要素が半透明な背景(rgbaまたはhslaを使用)を持っている必要があります。blur()値(ピクセル単位)は霧ガラスエフェクトの強度を制御し、10〜20pxは典型的な範囲です。saturate()は100%以上で、ガラスを見通す色を強調します。ボーダーは定義のために背景色のやや高い不透明度バージョンを使用し、box-shadowは奥行きを追加します。Safariでは-webkit-backdrop-filter接頭辞が必要です。フォールバックとして、backdrop-filterをサポートしないブラウザにはより不透明な背景を提供してください。@supports (backdrop-filter: blur(1px))を使用した機能検出を行ってください。パフォーマンスに関する注意点: backdrop-filterは大きな要素または複数のぼかされたレイヤーを重ねた場合にコストが高くなる可能性があります。
Tips & Best Practices
-
110〜20pxのぼかしを使ってクリアな霧吹き効果を実現する
-
2背景不透明度を15〜30%に保つとガラスのような外観になります
-
3彩度を150%以上に上げると、ガラスを通して色が強調されます
-
4カラフルな背景や画像の上に配置すると最も印象的な効果が得られます
Related Tools
CSS ボックスシャドウジェネレーター
複数のレイヤー、インセットオプション、リアルタイムプレビューを使用してCSSボックスシャドウを生成します。
🎨 CSS & Design
CSS カードジェネレーター
バックドロップブラー、透明度、影のコントロールを備えたガラスモルフィズムカードデザインを作成します。
🎨 CSS & Design
ネウモルフィズムジェネレーター
明暗の影ペアを使用して、ネウモルフィック(ソフトUI)デザインを作成します。
🎨 CSS & Design
クレヨモルフィズムジェネレーター
丸みを帯びた角、インナーシャドウ、ソフトなハイライトでクレイのような3D UIエフェクトを作成します。
🎨 CSS & DesignFrequently Asked Questions
Q ガラスモーフィズムはすべてのブラウザでサポートされていますか?
Q なぜガラス効果が見えませんか?
Q ガラスモーフィズムはアクセシブルですか?
Q パフォーマンスへの影響は?
Q ガラスモーフィズムをアニメーション化できますか?
About This Tool
ガラスモルフィズムジェネレーター is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.