📢 このページにはアフィリエイト広告が含まれます。

※ 当サイトはAmazonアソシエイト・プログラムに参加しており、適格販売により収入を得ています。

CSS グラスモーフィズム生成ツール

すりガラス調（Glassmorphism）のUIコンポーネントをスライダーで直感的に調整し、モダンブラウザに対応した backdrop-filter CSSを生成します。

⚙️ スタイル設定

スタイルプリセット

ぼかし強度 (Blur): 16px

背景不透明度 (Opacity): 0.25

境界線の透明度 (Border): 0.30

角丸 (Border Radius): 12px

👁️ リアルタイムプレビュー

Goroneko Glass

現代的なグラスモーフィズムカードのプレビュー表示です。

適用プロパティ: backdrop-filter: blur(16px);

💻 生成されたCSSコード

CSS

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

💡 グラスモーフィズム（すりガラス効果）実装のポイント

backdrop-filter: 要素の「背景にある描画コンテンツ」に直接ブラーをかけるCSSプロパティです。Safari用に -webkit-backdrop-filter の併記が推奨されます。
薄い境界線 (Border): 背景が透ける半透明の明るいボーダー（例: rgba(255, 255, 255, 0.3)）を引くことで、ガラスの縁の反射光を表現し、視認性を大幅に向上させます。
セキュリティと完全性: スタイル計算・プレビューはすべてブラウザ上で完結し、外部サーバーへの入力データの送信はありません。