グラスモーフィズム ジェネレーター
すりガラス調のカードをダイヤルで調整します。ぼかし、色合い、境界線のハイライト、角の半径、影。本物のアニメーション背景の上に浮かぶプレビューで、動きの中でのぼかしの質を確認できます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
backdrop-filter: blur() は、すりガラスの外観を実現する CSS プロパティです。背後にあるものをぼかす半透明のパネルで、単にフラットな色を薄くするだけではありません。問題は、ぼかしの品質を静的な色見本で判断するのはほぼ不可能だということです。実際のページでコンテンツや動画、アニメーション ヒーローイメージの背後にある場合と同じように、何かが実際にその下で動いている時にはじめて、説得力のある見え方になります。このジェネレーターは、プレビュー カードを静止画ではなく、本物のアニメーション背景の上に配置します。スライダーをドラッグしながら見えるものは、訪問者が実際に体験するものそのものです。
背景は本物の CSS アニメーションです。要素のサイズの 400% で描画された大きな linear-gradient を、@keyframes で background-position をループさせて前後に動かしています。JavaScript のアニメーション ループや canvas は使用していません。実際のプロダクションのヒーロー セクションで使用されるのと同じ、連続的な background-position の手法です。ぼかし、色合いの色と不透明度、境界線のハイライトの色/不透明度/幅、角の半径、影の柔らかさはすべて、浮かんでいるカードのライブ スタイルを駆動し、コピー用の CSS ボックスにはまったく同じ値が反映されます。
すべてのブラウザが backdrop-filter に対応しているわけではありません。そのため、このジェネレーターは実際の @supports not (backdrop-filter: blur(1px)) ブロックも生成します。これは形だけのものではなく、実際に設定した色合いの不透明度から計算された独自の背景色を持つフォールバック ルールです。ぼかしのない半透明は見た目が著しく悪くなるため（背後にあるものがぼやけずに透けて見えます）、フォールバックでは自動的にアルファ チャンネルが選択した色合いの不透明度よりも高くなります。生成される CSS のコメントで、その理由と差が正確に説明されます。
すべての計算とレンダリングはお使いのブラウザ内で行われます。アップロードやアカウント作成、サーバーとの通信は一切不要です。カードの見え方が良くなったら CSS をコピーし、写真、動画、グラデーションの上に配置したい任意の要素に貼り付けてください。@supports ブロックを保持すれば、古いブラウザでも、かろうじて見えるカードではなく、読みやすい、より不透明なカードが表示されます。