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

CSS GlassMorphism ジェネレーターは、フロスト ガラス UI スタイルのビジュアル エディターであり、半透明の表面がその背後にあるものをぼかすものです。 背景のぼかし、塗りつぶしの透明度、彩度、色合い、角の半径をスライダーで調整し、カラフルな背景のプレビュー更新を見て、それが生成する CSS をコピーします。

GlassMorphism は、要素自体ではなく、要素の背後にあるコンテンツにぼかしを適用する、背景フィルター プロパティに依存します。 半透明の背景、生え際の境界線、柔らかな影と組み合わせることで、現代のオペレーティング システムで人気のあるレイヤード ガラスの外観が生まれます。 バランスを正しく手に入れるのは面倒なので、このツールはすべての値を管理し、きれいでコピー可能なブロックを出力します。

すべてがブラウザで実行されます。 「Frosted」、「Dark」、「Vibrant」などのプリセットを選択し、スライダーを微調整し、CSS をコピーします。これには、サポートを拡大するための -webkit プレフィックス付き背景フィルターが含まれます。アカウントもアップロードも行われず、ページがロードされるとオフラインで動作し続けます。

効果は一緒に働く2 つの特性に依存し、どちらかが欠けている場合は静かに失敗します。 backdrop-filterは要素の後ろに座っているものをぼかすので、それは透けて見せるために部分的に透明な背景色を必要とします: 完全な不透明度で見るものは何もなく、背景がまったくない表面が消えます また、ぼかす価値のあるものを背後に必要とします、それが効果が無地の背景の上に平らなパネルのように見え、写真の上に生き生きとしている理由です 2 つの実用的なコスト バックドロップぼかしは、特に広い領域上またはスクロール中に合成するためのより高価なものの1 つであり、半透明の表面上のテキストは、その下を通過するものと変化するコントラスト比を持っているため、ある背景に対してコントラストチェックを通過し、別の背景に対して失敗する可能性があります。

glassmorphism CSSジェネレーターとして、Frostedプリセットから起動し、そのプリセットのコピーされたブロックは、background: rgba (255, 255, 255, 0.2); backrodc-filter: blur (10px) saturate (120%); 再び-webkit-backdrop-filterと同じ値; border-radius: 16px; border: 1px solid rgba (255, 255, 255, 0.18); box-shadow: 0 8px 32px rgba (0, 0, 0, 0.12) をクリックします。 dark をクリックすると、背景は 12px blur で rgba (15, 23, 42, 0.25) に変わります。これは、軽い写真の上に使うバージョンです。