Quick Presets:
Preview Backdrop:
Blur Intensity16px
Background Opacity25%
Tint Color
Border Width1px
Border Opacity30%
Corner Radius24px
OmniCard
Glass UI•••• •••• •••• 2026
CardholderAlex Mercer
Expires12/28
background: rgba(255, 255, 255, 0.25);
border-radius: 24px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.30);すりガラス効果の作成手順
- 1ぼかし（Blur）、背景の不透明度、彩度スライダーを調整します。
- 2カードの境界線（Border）のハイライト色と太さを微調整します。
- 3クロスブラウザ対応のCSSコードをコピーしてプロジェクトに適用します。
モダンUIにおけるすりガラス表現
`backdrop-filter: blur()` と半透明背景、1pxの淡いボーダーを組み合わせることで、背景との奥行き感を美しく演出できます。
Architecture & Privacy
- Dual backdrop filter declaration: Includes standard backdrop-filter alongside vendor-prefixed -webkit-backdrop-filter for iOS Safari.
- Hardware acceleration optimization: GPU composited layer rendering prevents scroll jank.
- Real-time RGBA alpha channel calculation from standard hexadecimal color selections.