CSSグラスモーフィズムジェネレーター - すりガラス効果を作成
ライブプレビューで美しいすりガラスCSSエフェクトを生成。ぼかし、透明度、ボーダー、シャドウをカスタマイズできます。
よくある質問
グラスモーフィズムとは何ですか？
グラスモーフィズムは、半透明の背景、背景ブラー、繊細なボーダーを使用してすりガラス効果を作り出すモダンなUIデザイントレンドです。AppleのmacOS Big SurやWindows 11のFluent Designで広まり、背景コンテンツが柔らかくぼかされて見えることで要素に奥行きとレイヤリング感を与えます。この効果は主にbackdrop-filter、半透明の背景、薄い明るいボーダーなどのCSSプロパティによって実現されます。
このグラスモーフィズムジェネレーターの使い方は？
ブラー強度スライダーを調整してすりガラス効果を制御し、カラーピッカーとスライダーで背景色とその不透明度を設定します。ボーダーとボックスシャドウの有効/無効を切り替え、幅、色、不透明度、半径などのパラメータを微調整します。ライブプレビューがリアルタイムで更新されるため、正確な結果を確認できます。満足したら、生成されたCSSコードをスタイルシートに直接コピーしてください。
データは安全ですか？サーバーに送信されるものはありますか？
はい、データは完全に安全です。このツールはクライアントサイドのJavaScriptを使用して100%ブラウザで実行されます。データ、設定、デザイン情報がサーバーに送信されることは一切ありません。すべてのCSS生成、プレビューレンダリング、色計算はデバイス上でローカルに行われるため、機密性の高いデザイン作業やクライアントプロジェクトでも安全に使用できます。
backdrop-filterとは何ですか？どのように機能しますか？
CSSのbackdrop-filterプロパティは、要素の背後の領域にブラー、明るさ、コントラストなどのグラフィカルエフェクトを適用します。要素自体に影響を与えるfilterプロパティとは異なり、backdrop-filterは要素の透明または半透明の背景を通して見える部分にのみ影響します。グラスモーフィズムでは、backdrop-filter: blur()がパネル下のコンテンツをぼかしてすりガラスの外観を作り出す重要なプロパティです。
グラスモーフィズム / backdrop-filterをサポートするブラウザは？
backdrop-filterプロパティは、Chrome 76+、Firefox 103+、Safari 9+、Edge 79+を含む、世界中のブラウザの95%以上でサポートされています。Safariは実際に-webkit-プレフィックス付きでこれを実装した最初の主要ブラウザでした。最大の互換性を確保するため、-webkit-backdrop-filterとbackdrop-filterの両方の宣言を含めることが推奨されており、このジェネレーターは自動的に両方を出力します。
グラスモーフィズムはパフォーマンスにどう影響しますか？
backdrop-filterのブラーはGPUコンポジティングをトリガーし、過度に使用するとパフォーマンスに影響を与える可能性があります。ブラーされた各要素は、ブラウザが独立してレンダリングする必要がある個別のコンポジティングレイヤーを作成します。スムーズなパフォーマンスを維持するには、同時に表示されるグラス要素の数を制限し、適度なブラー値（8-20px）を使用し、グラスモーフィック要素のネストを避け、ブラー領域がビューポートの過度に大きな部分をカバーしないようにしてください。
ガラスパネル上でテキストの可読性を確保するには？
WCAGアクセシビリティガイドラインを満たすために、テキストとガラス背景の間に十分なコントラストを確保してください。コントラストを向上させるために背景の不透明度を上げ（0.3-0.5）、高いブラー値を使用して下層のコンテンツの干渉を減らし、パネルの境界を明確にするために繊細なボーダーを追加します。明るいガラスパネルには暗いテキスト、暗いガラスパネルには明るいテキストを使用し、さまざまな背景画像や色に対して常に可読性をテストしてください。
コード例
function hexToRgba(hex, opacity) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}
function generateGlassmorphismCSS(options = {}) {
const {
blur = 10,
bgColor = '#ffffff',
bgOpacity = 0.15,
borderEnabled = true,
borderWidth = 1,
borderColor = '#ffffff',
borderOpacity = 0.2,
borderRadius = 12,
shadowEnabled = true,
shadowX = 0,
shadowY = 4,
shadowBlur = 30,
shadowSpread = 0,
shadowColor = '#000000',
shadowOpacity = 0.1,
} = options;
const rules = [];
rules.push(`background: ${hexToRgba(bgColor, bgOpacity)};`);
rules.push(`-webkit-backdrop-filter: blur(${blur}px);`);
rules.push(`backdrop-filter: blur(${blur}px);`);
if (borderRadius > 0) {
rules.push(`border-radius: ${borderRadius}px;`);
}
if (borderEnabled && borderWidth > 0) {
rules.push(`border: ${borderWidth}px solid ${hexToRgba(borderColor, borderOpacity)};`);
}
if (shadowEnabled) {
rules.push(`box-shadow: ${shadowX}px ${shadowY}px ${shadowBlur}px ${shadowSpread}px ${hexToRgba(shadowColor, shadowOpacity)};`);
}
return rules.join('\n');
}
console.log(generateGlassmorphismCSS());
// background: rgba(255, 255, 255, 0.15);
// -webkit-backdrop-filter: blur(10px);
// backdrop-filter: blur(10px);
// border-radius: 12px;
// border: 1px solid rgba(255, 255, 255, 0.2);
// box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);