Background blur
Panels use backdrop-filter to blur and slightly saturate whatever sits behind them.
Interfaces made of frosted glass. Panels blur whatever sits behind them, so vivid color glows through while content stays readable on top.
Open the kit Copy promptGlassmorphism layers translucent panels over colorful backgrounds. Depth comes from blur and light edges, like looking through frosted glass.
Panels use backdrop-filter to blur and slightly saturate whatever sits behind them.
Surfaces are white at 10 to 25 percent opacity, often with a subtle diagonal gradient.
A thin semi-transparent white border catches the light and defines the pane.
The effect needs color behind it. Soft gradient blobs or photos give the glass something to frost.
Frosted glass has come back to interfaces several times, each time when hardware could finally afford the blur.
Windows Vista introduces translucent, blurred window frames, one of the first mass-market uses of glass in UI.
Apple replaces skeuomorphic textures with flat design and frosted, blurred layers.
Microsoft's Fluent Design System formalises a blurred acrylic material for Windows apps.
Designer Michał Malewicz popularises the term glassmorphism, and macOS Big Sur leans heavily on translucency the same year.
Apple introduces Liquid Glass across its platforms, bringing refractive, moving glass effects into system UI.
Glass motion happens behind the pane. Colors drift slowly underneath, and the frosted surface stays still and calm.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Cards and balances float over gradients, feeling premium and light.
Album art blurs behind controls, so the interface takes on the color of the content.
Menus, sidebars and notification panels use glass to stay connected to what is underneath.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Saturated blobs behind, white glass in front. Text is almost always white. Tap a swatch to copy its hex value.
:root{
--deep-violet: #2A1B6E;
--iris: #7A4DFF;
--coral: #FF8A5B;
--aqua: #38D9F5;
--orchid: #F55BD2;
--glass-white: #FFFFFF;
}A clean geometric sans in heavy and regular weights. Glass is already decorative, so type stays simple.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Urbanist",system-ui,sans-serif;
--font-b: "Urbanist",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(42px, 9vw, 81px);
--fs-1: 41.5px; --fs-2: 33.2px;
--fs-3: 26.6px; --fs-4: 21.2px;
--fs-body: 17px; --fs-sm: 13.6px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 800;
letter-spacing: -.02em;
text-transform: none;
line-height: 1.02;
}
/* fonts: Urbanist in three weights */Use roomy layouts with overlapping panels on large screens. Overlaps show off the blur.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Large radius, hairline light border, soft dark shadow to lift panes off the backdrop.
:root {
--radius: 20px;
--radius-sm: 14px;
--bw: 1px;
--shadow: 0 8px 32px rgba(10,6,40,.35);
--shadow-sm: 0 4px 16px rgba(10,6,40,.3);
--gap: 24px;
--pad: 26px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Glassmorphism kit · Anti-Boring */
:root{
--bg:#2A1B6E;
--surface:rgba(255,255,255,.14);
--surface2:rgba(255,255,255,.08);
--fg:#FFFFFF;
--muted:rgba(255,255,255,.78);
--accent:#FFFFFF;
--accent-fg:#2A1B6E;
--accent2:rgba(255,255,255,.18);
--accent2-fg:#FFFFFF;
--border:rgba(255,255,255,.4);
--bw:1px;
--radius:20px;
--radius-sm:14px;
--shadow:0 8px 32px rgba(10,6,40,.35);
--shadow-sm:0 4px 16px rgba(10,6,40,.3);
--font-d:"Urbanist",system-ui,sans-serif;
--font-b:"Urbanist",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:800;
--h-track:-.02em;
--h-case:none;
--h-style:normal;
--h-lh:1.02;
--gap:24px;
--pad:26px;
--focus:rgba(255,255,255,.45);
--ok:#6CF2B2;
--warn:#FFD37A;
--danger:#FF8FA3;
--info:#9FE7FF;
--field-bg:rgba(255,255,255,.1);
--field-shadow:none;
--media:radial-gradient(circle at 20% 30%,#FF8A5B,transparent 50%),radial-gradient(circle at 80% 70%,#38D9F5,transparent 50%),#7A4DFF;
--code-bg:rgba(12,8,40,.72);
--code-fg:#E9E4FF;
--btn-case:none;
--btn-track:0;
--btn-weight:600;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.6px;
--fs-body:17px;
--fs-4:21.2px;
--fs-3:26.6px;
--fs-2:33.2px;
--fs-1:41.5px;
--fs-d:clamp(42px, 9vw, 81px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.card,.alert,.table-wrap,.input,.select,.textarea,.btn-2,.btn-ghost,.badge,.pager a,.tabs{-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.card{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06))}
.btn{border-color:rgba(255,255,255,.7);border-radius:999px}
.btn-ghost{border-color:rgba(255,255,255,.5)}
.input::placeholder,.textarea::placeholder{color:rgba(255,255,255,.6)}
.select option{color:#111}
.check:checked::after{border-color:#2A1B6E}.radio:checked::after{background:#2A1B6E}
.switch{background:rgba(255,255,255,.15)}.switch::before{background:#fff}.switch:checked::before{background:#2A1B6E}
.alert b{color:#fff}
.alert{border-left:4px solid var(--c)}
.tabs{border-radius:999px;padding:4px;display:inline-flex;border:1px solid var(--border);background:rgba(255,255,255,.1)}
.tab{border:0;border-radius:999px;margin:0;color:var(--muted)}
.tab[aria-selected="true"]{background:rgba(255,255,255,.9);color:#2A1B6E}
.pager a{background:rgba(255,255,255,.1)}
.table th,.table td{border-bottom-color:rgba(255,255,255,.2)}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#EEF0FF;
--surface:rgba(255,255,255,.55);
--surface2:rgba(255,255,255,.35);
--fg:#1E1550;
--muted:#4A4380;
--border:rgba(255,255,255,.9);
--accent:#2A1B6E;
--accent-fg:#FFFFFF;
--accent2:rgba(42,27,110,.08);
--accent2-fg:#1E1550;
--field-bg:rgba(255,255,255,.6);
--code-bg:rgba(30,21,80,.9);
}
html.alt body::before{opacity:.45}html.alt .check:checked::after{border-color:#fff}html.alt .radio:checked::after{background:#fff}html.alt .switch:checked::before{background:#fff}html.alt .tab[aria-selected="true"]{background:#2A1B6E;color:#fff}html.alt .alert b{color:#1E1550}html.alt .input::placeholder,html.alt .textarea::placeholder{color:#6A639A}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A 2025 twist on frosted glass. Panels look thicker and wetter, with a bright rim of light, strong refraction and colour bending at the edges.
Less blur, more saturation, and coloured inner edges that mimic light bending through thick glass.
.liquid{position:relative;padding:28px;border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.04));backdrop-filter:blur(8px) saturate(180%) contrast(1.1);-webkit-backdrop-filter:blur(8px) saturate(180%) contrast(1.1);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -8px 20px rgba(255,255,255,.12),inset 6px 0 12px rgba(120,220,255,.25),inset -6px 0 12px rgba(255,120,200,.25),0 20px 40px rgba(10,6,40,.35);border:1px solid rgba(255,255,255,.5);color:#fff}
.liquid::before{content:"";position:absolute;inset:6px 10% auto;height:40%;border-radius:26px;background:linear-gradient(rgba(255,255,255,.45),transparent);pointer-events:none}
.liquid-wrap{position:relative;padding:40px;border-radius:24px;background:radial-gradient(circle at 20% 30%,#FF8A5B,transparent 40%),radial-gradient(circle at 80% 70%,#38D9F5,transparent 45%),#7A4DFF;overflow:hidden}
<div class="liquid-wrap"><div class="liquid"><strong style="font-size:1.4rem">Liquid Glass panel</strong><p style="margin:.5em 0 0">Less blur, more saturation, and coloured inner edges that mimic light bending through thick glass.</p></div></div>The difference from classic glassmorphism: lower blur, higher saturation and contrast, a strong top highlight and coloured inner rims. Use it for small controls and floating toolbars, not whole pages.
A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a personal finance app in an authentic Glassmorphism style.
Palette: Deep violet #2A1B6E, Iris #7A4DFF, Coral #FF8A5B, Aqua #38D9F5, Orchid #F55BD2, Glass white #FFFFFF.
Typography: Urbanist 800 for headings, Urbanist 400 and 600 for body and buttons.
Layout: Two-column hero: headline left, a large frosted balance card floating over three soft color blobs on the right. Overlapping glass panels further down.
Signature details: backdrop-filter: blur(18px) saturate(150%), white fills at 14 to 25 percent opacity, 1px white borders at 40 percent, radius 20px, vivid blurred blobs on a deep violet base.
Components: White pill primary button with violet text, glass secondary buttons, glass inputs with white placeholder, a segmented glass tab bar, glass alerts with colored left edge.
Motion: Background blobs drift slowly over 12 seconds. Glass panels stay still.
Avoid: glass over flat backgrounds, gray text on glass, hard black borders, too many stacked blur layers.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Busy backgrounds bleed through. Increase blur or opacity until text passes contrast checks everywhere.
Glass over a flat color looks like gray plastic. The style needs color or imagery behind it.
Many large blurred layers can drain battery on phones. Limit the number of glass panes in view.
Provide a solid semi-opaque fallback for browsers or settings that disable backdrop-filter.