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

glassmorphismスタイルのCSS生成。透明度・ぼかし・彩度を調整してリアルタイムプレビュー。

プリセット

設定

ぼかし: 10px

透明度: 0.25

彩度: 180%

背景色

ボーダー透明度: 0.18

CSS

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

プレビュー

Glassmorphism

背景のぼかしと透明度で美しいガラス質の効果を実現。モダンなUIデザインに最適なスタイルです。