background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);The CSS Glassmorphism Generator is a visual editor for the frosted-glass UI style, where a translucent surface blurs whatever sits behind it. You adjust backdrop blur, fill transparency, saturation, tint color, and corner radius with sliders, watch a preview update over a colourful background, and copy the exact CSS it produces.
Glassmorphism relies on the backdrop-filter property, which applies a blur to the content behind an element rather than the element itself. Combined with a semi-transparent background, a hairline border, and a soft shadow, it produces the layered glass look popularised by modern operating systems. Getting the balance right by hand is fiddly, so this tool manages every value and outputs a clean, copyable block.
Everything runs in your browser. Pick a preset like Frosted, Dark, or Vibrant, fine-tune the sliders, and copy the CSS — including the -webkit- prefixed backdrop-filter for wider support. No account, no uploads, and it keeps working offline once the page has loaded.
Start from Frosted, Light, Dark, Vibrant, or Subtle to get a balanced glass look, then refine it to match your design.
Drag the backdrop blur, transparency, and saturation sliders, choose a tint color, and set the corner radius. The preview updates live over a colourful backdrop so the blur is visible.
Turn the hairline border on or off. A subtle 1px translucent-white border sells the glass edge, especially on darker backgrounds.
Copy the generated block — background, backdrop-filter (with -webkit- prefix), border-radius, border, and shadow — and paste it onto your card or panel.
A dedicated blur slider drives the backdrop-filter, which frosts whatever sits behind the element — the core of the glass effect
Transparency, saturation, tint color, corner radius, and an optional hairline border let you dial in the exact glass look
The preview sits over a colourful gradient so you can actually see the backdrop blur working, updating instantly as you edit
Output includes both backdrop-filter and the -webkit-backdrop-filter prefix, so the effect works across Safari and other WebKit browsers
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!