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

機能の説明

すりガラス（グラスモーフィズム）CSS を生成します — backdrop-blur、半透明の背景、繊細なボーダー、柔らかなシャドウ。blur・不透明度・色調・角丸・ボーダー・彩度を調整し、ライブプレビューで確認して、完全な宣言ブロックをコピーします。100% クライアントサイド。

使い方

1. スライダーを調整します：Blur、Opacity、Border、Radius、Saturation。
2. Tint カラーを選びます。
3. CSS を Copy します。

例

Blur 12、不透明度 0.6、白色調、角丸 16 →

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

補足事項

• プライベート: 生成はローカルで行われます。
• backdrop-filter は、要素の背後にカラフルな背景か画像が必要です。ないと効果が見えません。
• 関連ツール: Box-Shadow Generator、CSS Gradient Generator。