グラスモーフィズム生成

透明度・ブラー調整でグラスモーフィズム CSS を生成

プリセット

Blur (px)

Saturation (%)

Background color

Background opacity

Border color

Border opacity

Border radius (px)

Glassmorphism は背景の色や画像が透けることで成立するため、プレビューはあえてカラフルなグラデーションの上に配置されています。

ガラスプレビュー

backdrop-filter · rgba background

CSS

.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 12px;
}

使い方

プリセットボタンをクリックして (例: Frosted、Tinted、Dark)、既製スタイルから開始します。
背景の不透明度、ぼかし半径、境界線の不透明度、背景色を使用してコントロールを調整します。
グラデーション背景に対してカードプレビューがリアルタイムで更新されるのを見ます。
生成された CSS (backdrop-filter、background、border) をコピーして、プロジェクトに貼り付けます。

例

ぼかし 12px、背景 rgba(255,255,255,0.15)、境界線 rgba(255,255,255,0.3) を設定すると、微妙なすりガラスカード効果が生成されます。
ダークプリセットは、ダークテーマのダッシュボードに適した濃い半透明の背景にぼかしを適用します。

本番環境で使用する前に出力を検証してください。保証なし — 詳細は利用規約.