ZenovayTools

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

ライブ プレビュー付きで CSS グラスモーフィズム効果を生成します。ぼかし、透明度、枠線、および色を調整します。すぐに使用できる CSS コードをコピーします。

Glass Properties

Blur12px
Transparency25%
Saturation120%
Border Opacity30%
Border Radius16px
Glass Color
#ffffff

Preview Background

Glass Card

Glassmorphism effect

This is a preview of your glassmorphism CSS. Adjust the sliders to customize the blur, transparency, and other properties.

Action
Cancel
CSS Code
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

Browser support: backdrop-filter is supported in 96%+ of browsers. Add the -webkit- prefix for Safari. Use @supports for fallback styling.

グラスモーフィズム ジェネレータの使い方

  1. 1ぼかし、透明度、および色のスライダーを調整します。
  2. 2グラスモーフィズム効果がリアルタイムで更新されるのを確認します。
  3. 3枠線、枠線の半径、および背景をカスタマイズします。
  4. 4プロジェクト用に生成された CSS コードをコピーします。
Zenovayアナリティクス

トラフィックを顧客に変える。

  • リアルタイムの訪問者トラッキング
  • プライバシーファースト、クッキーバナーなし
  • 2分でセットアップ
Zenovayを見る

関連ツール

CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。
CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。
CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。
CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。

よくある質問

グラスモーフィズムとは何ですか？▾
グラスモーフィズムは、CSS backdrop-filter を使用してフロストガラス効果を作成する UI デザイン トレンドです。主な特性は半透明の背景、ぼかし、微妙な枠線、および柔らかい影です。Apple と Microsoft によって普及しました。
backdrop-filter: blur() はどのように機能しますか？▾
CSS backdrop-filter プロパティは、要素の背後の領域にグラフィカル効果を適用します。blur() は、半透明の要素を通して見える内容に対してガウス ぼかしを作成します。典型的な値は 4～20px です。
どのブラウザがグラスモーフィズムをサポートしていますか？▾
backdrop-filter は Chrome 76+、Safari 9+、Firefox 103+、Edge 79+ でサポートされています。グローバル サポートは約 96% です。Safari の場合は -webkit- プレフィックスを使用し、フォールバック スタイリング用に @supports を使用します。
グラスモーフィズムをアクセシブルにするにはどうすればよいですか？▾
テキストに十分なコントラストがあることを確認します（通常のテキストの場合 WCAG 4.5:1）。必要に応じて背景の不透明度を上げます。枠線を追加して境界を定義します。prefers-reduced-transparency メディア クエリを検討します。
グラスモーフィズムはパフォーマンスに影響しますか？▾
backdrop-filter は GPU 合成をトリガーします。ぼかし半径を制限し、ぼかし値のアニメーション化を避け、重複するガラス要素を最小化します。いくつかのガラス カードは問題ありませんが、全ページ オーバーレイはフレーム ドロップを引き起こす可能性があります。
グラスモーフィズム効果をアニメーション化できますか？▾
はい。ただし、ぼかし値自体ではなく、不透明度と変換をアニメーション化します。CSS トランジションは、ガラス カードのホバー状態に適しています。