背景色background
背景の透明度opacity
ぼかしblur
彩度saturate
明るさbrightness
コントラストcontrast
つやgloss
ガラスglass
Preview
背景の上に重ねて質感を確認できます。数値を動かすと、この面がリアルタイムに変化します。
生成されたCSS
background-color: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(20px) saturate(140%) brightness(100%) contrast(100%);
backdrop-filter: blur(20px) saturate(140%) brightness(100%) contrast(100%);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: inset 0 -2px 6px 0 rgba(0, 0, 0, 0.1);プリセット
リキッドグラス
輪郭が液体のようににじむ、今っぽい質感
フロスト
定番の、しっかり曇ったすりガラス
ヴェール
どの数値も中間の、バランス型
ミルク
白濃度の高い、乳白色に近い質感
シアー
白をほとんど感じない、薄いガラス
スモーク
彩度を落とした、煙るような質感