backdrop-filterのぼかし、透明度、ボーダー、陰影をリアルタイムに調整し、モダンなCSSグラスモーフィズムやすりガラスUIコードを即座に生成・コピーできます。
backdrop-filterによるぼかし、不透明度、境界線、シャドウをリアルタイムに調整し、モダンなCSSグラスモーフィズムやすりガラスUIコードを生成。クリーンなHTMLとCSSを瞬時にコピーできます。
要素直下の背面ピクセルに適用されるガウスぼかし畳み込み演算の標準偏差（半径）を制御します。推奨される安全なベンチマーク範囲は8px〜24pxです。32pxを超える値は、低消費電力のモバイル端末においてGPUのラスタライズフィルレートに深刻なボトルネックを引き起こす要因となります。
Apple Safari（iOS SafariおよびmacOS Safari）で必須となるWebKitエンジン向けのベンダープレフィックスです。この接頭辞を省略するとSafariですりガラスのぼかし処理が完全に機能せず、単なる半透明の平坦なポリゴンとして描画されます。
基底サーフェスの色調と光の透過率を決定します。アルファ値の黄金比率はダーク系ガラスで0.10〜0.35、ライト系すりガラスで0.25〜0.70です。0.75を超えると背景の透過屈折感が失われ、0.08を下回ると要素の構造的なコントラストが崩壊します。
ガラスのエッジが入射光を屈折させるフレネル反射（リムライト）を光学的にシミュレートします。アルファ値0.15〜0.40の半透明1pxボーダー、または明から暗へとフェードする指向性の線形グラデーション（linear-gradient）を指定すると最も自然な立体感を得られます。
ガウスぼかしによって生じる彩度低下の光学的副作用を補正します。彩度（saturation）を120%〜180%にブーストすることで色彩の鮮やかさを回復させ、ぼかした背景が白っぽく濁ったり色あせたりするのを防止します。
すりガラスの表面に手続き型のフラクタルノイズグレインを付与します。一般的なsRGBディスプレイでぼかし背景に発生しやすい8ビットの階段状カラーバンディング（階調飛び）を解消し、物理的なアクリル板のような触感のある質感を再現します。
現実世界の物理的なガラスは、主光源の角度に応じて不均一に光を反射します。単色の平坦なボーダーではなく、border-imageや疑似要素を用いて background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.05) 100%) のような指向性グラデーション境界線を適用してください。これにより左上光源の入射角が明確になり、リアルな3次元の触覚的深度が生まれます。
backdrop-filterの計算では、ブラウザの合成エンジンがフレームごとに背景レイヤーのスナップショットを取得し、ガウス畳み込み演算を行って再合成する必要があります。スムーズなスクロールやアニメーション遷移時には、will-change: transform または transform: translateZ(0) を宣言してガラスコンテナを独立したGPU合成レイヤーへ昇格させ、フレーム落ち（スタッター）を未然に防止してください。
WebKit系ブラウザでは、ぼかされたピクセルがカードの角丸境界の外側へ滲み出したり、border-radiusの内側にアンチエイリアスの効いていない角張った矩形境界がレンダリングされる不具合が頻発します。このエッジ描画アーティファクトを防ぐには、すりガラスのコンテナに overflow: hidden、isolation: isolate、および -webkit-mask-image: -webkit-radial-gradient(white, black) を併せて宣言してください。
半透明ガラスの上に明るいテキストを直接配置すると、動的背景が暗部から明部へ切り替わった際にWCAGの4.5:1コントラスト比要件を満たせなくなることが多々あります。box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25) で内部に環境減光（ビネット）を付与するか、text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) を追加することで、予測不能な背景画像上でも確実なアクセシビリティ適合性を維持できます。
頻出する3大原因を確認してください。(1) Safari互換性のため、backdrop-filter の直前に -webkit-backdrop-filter が記述されているか確認する；(2) カードの背景色が不透明（例: rgba(255,255,255,0.2) ではなく #FFFFFF）になっていないか点検する；(3) 親DOMノードに標準的なスタッキングコンテキストのキャプチャを阻害する CSS filter、transform、perspective プロパティが適用されていないか確認する。
グラスモーフィズムは、要素直下の高コントラストな下地変化に依存する光学的エフェクトです。均一な単色ベタ塗りの上に配置した場合、ガウスぼかしで拡散させる視覚的変化が存在しません。下地レイヤーに繊細な多色グラデーション、幾何学シェイプ、写真要素などを配置し、1pxの鏡面反射ボーダーのコントラストを高めてください。
複数の backdrop-filter 要素が重なり合うと、スクロールイベントごとにGPUのマルチパスラスタライズが強制されます。ぼかし半径を20px以下に制限し、backdrop-filter 要素の多重ネストを避け、@media (hover: none) や @media (max-width: 768px) を用いてモバイルビューポートではぼかしをオフにし、contain: paint を指定して描画領域を限定してください。
コンテナ要素に対して通常の CSS filter: blur(...) を絶対に使用しないでください。filter プロパティは対象要素自身およびそのすべての子DOMノードに無差別に適用されます。必ず backdrop-filter: blur(...) を使用してください。これにより要素背面のピクセルのみが排他的にぼかされ、前面のテキストやアイコンはシャープで鮮明な描画を維持できます。
ピュアCSSですりガラス効果を実現するには、3つの基本プロパティを組み合わせます。(1) backdrop-filter: blur(16px) とそのベンダープレフィックス -webkit-backdrop-filter: blur(16px)；(2) 半透明の背景色 background: rgba(255, 255, 255, 0.2)；(3) 繊細な鏡面リム反射 border: 1px solid rgba(255, 255, 255, 0.3)。さらに複数階層のbox-shadowや彩度フィルター（backdrop-filter: blur(16px) saturate(140%)）を追加することで、よりリアルな質感を表現できます。
業界標準のスイートスポット（最適値）は、ぼかし半径12px〜24pxと背景アルファ不透明度0.15〜0.35の組み合わせです。8px未満のぼかしではすりガラス特有の拡散感が不足し、32pxを超えるとGPUのラスタライズ負荷とバッテリー消費が著しく増大します。ダークモードでは rgba(15, 23, 42, 0.3) と 20pxぼかし、ライトモードでは rgba(255, 255, 255, 0.4) と 16pxぼかしの組み合わせが推奨されます。
CSS の filter: blur() は対象要素自身とそのすべての子孫要素（内部のテキスト、ボタン、画像など）を一括してぼかしてしまい、文字が判読不能になります。一方、backdrop-filter: blur() は要素の境界ボックス直下に位置する背景グラフィックとコンテンツのみをぼかすため、コンテナ内部の文字、UIコントロール、タイポグラフィは100%シャープで高い可読性を維持できます。
backdrop-filterが機能しない最も一般的な要因は、Apple Safari（iOSおよびmacOS）に必要なベンダープレフィックス -webkit-backdrop-filter の記述漏れ、背景色が不透明度100%で宣言され背面が完全に遮蔽されているケース、または親先祖コンテナで overflow: hidden と CSS filter プロパティが併用されているケースです。非対応ブラウザ（Firefox 103未満や古いAndroid WebViewなど）に対しては、@supports not (backdrop-filter: blur(1px)) を利用して不透明度85%の代替単色背景を提供するプログレッシブエンハンスメント設計を行ってください。
画質を落とさずにブラウザ上で画像を高速圧縮。JPG、PNG、WebPのファイル容量をサーバー送信ゼロで軽量化。目標KB逆算機能やZIP一括書き出しにも対応しています。
CSS linear、radial、conicグラデーションの完全な構文ガイド。二重位置カラーストップ、OKLCH色空間補間、放射形状制御、テキストマスク、Tailwind CSS / SVG連携まで網羅。
自然で美しい光学多層シャドウを作成。アンビエントオクルージョン、インセット、ブラー拡散、多重階層を直感的に調整し、TailwindやCSSコードを即座に出力します。
ドラッグ操作でポリゴン頂点を自由に編集。レスポンシブ対応のCSS clip-pathおよびSVGクリッピングマスクを即時生成。
直感的な2次元CSSグリッド作成ツール。fr比率単位・minmax()関数・gap間隔を視覚的に調整し、最適化されたCSS、Tailwind、React JSXコードを即座に生成します。
スラッシュ(/)構文による8値完全指定で、自然な有機的ブロブ形状やスキュアクルを直感的に生成・エクスポート。