Presets
Glass
background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
What it does
Create frosted-glass (glassmorphism) CSS - backdrop-blur, a translucent background, a subtle border, and a soft shadow. Tweak blur, opacity, tint, radius, border, and saturation, preview it live, and copy the full declaration block. 100% client-side.
How to use it
- Adjust the sliders: Blur, Opacity, Border, Radius, Saturation.
- Pick a Tint color.
- Copy the CSS.
Examples
Blur 12, opacity 0.6, tint white, radius 16 →
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);Good to know
- Private: generation is local.
backdrop-filterneeds a colorful or image background behind the element to show the effect.- Related tools: Box-Shadow Generator, CSS Gradient Generator.