Glassmorphism: the frosted glass effect
Panels that blur and tint whatever sits behind them, like frosted glass. Here is the CSS behind it, the mistakes that make it unreadable, and the skills that build frosted glass heroes and keynote decks.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
What is a glassmorphism?
Glassmorphism is a UI style where cards and panels look like sheets of frosted glass: semi-transparent, blurring the colors behind them, with a thin light edge and a soft shadow. It needs something colorful behind it to work. On a flat white page the glass simply disappears.
It shows up in dashboards, keynote slides, app landing pages and operating systems. Done well, it adds depth without adding clutter. Done badly, it puts gray text on a busy blur nobody can read.
How the effect works
The core is one CSS property, backdrop-filter, which blurs whatever is drawn behind an element before the element itself is painted. Pair a blur of 12 to 24 pixels with a background that is only 10 to 20 percent opaque, and the color behind bleeds through as soft light.
The rest is the finish that sells the material: a one-pixel border that is lighter at the top than at the bottom, an inner highlight, and a shadow that lifts the panel off the page. The real thing in 3D also refracts, bending the background as if through a lens, which needs a shader rather than CSS.
01
Put color behind it
Gradients, blobs, a photo or a moving background. The blur needs something to blur.
02
Blur and tint
backdrop-filter: blur(16px) saturate(160%) with a white or dark background at about 0.12 alpha.
03
Draw the edge
A thin, light border and an inset top highlight read as the glass edge catching light.
04
Plan the fallback
Where backdrop-filter is missing or slow, swap to a near-opaque panel so text still reads.
HTML
A frosted glass card in CSS
One card over two colored blobs. The @supports block gives browsers without backdrop-filter a solid panel instead of a see-through one.
<div class="scene">
<div class="glass">
<h2>Quarterly review</h2>
<p>Revenue up 32% on last quarter.</p>
</div>
</div>
<style>
.scene {
min-height: 360px; display: grid; place-items: center; padding: 32px;
background:
radial-gradient(circle at 25% 30%, #ff7a59 0 18%, transparent 19%),
radial-gradient(circle at 72% 68%, #5b8cff 0 22%, transparent 23%),
#141824;
}
.glass {
width: min(420px, 100%); padding: 28px; color: #fff;
background: rgb(255 255 255 / 0.12);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.28);
border-radius: 20px;
box-shadow: 0 12px 32px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: rgb(28 32 46 / 0.92); }
}
</style>A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.
What to get right on a real page
01
Test contrast on the worst spot
Text sits over whatever is brightest behind the glass at that moment. Check it there, not on the average color, or darken the tint until it passes.
02
Do not stack glass on glass
Each blurred layer redraws everything under it. Several overlapping panels make scrolling stutter on mid-range phones.
03
Give the background some shape
Blur turns fine detail into mush. Large, soft shapes of color behind the panel look best.
04
Keep a solid fallback
Use @supports to give old browsers and low-power modes a near-opaque panel, so nothing turns unreadable.
Skills that build a glassmorphism
Three ways to use the look: an animated 3D glass hero, glass over a mesh gradient, and a whole keynote deck in frosted panels.
- Frosted Glass HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
Frosted Glass Hero
Animated WebGL hero · HTML page + embed · MP4 recorder
Real 3D glass, not just a blurred card: a piece of frosted glass turns slowly beside your headline, swells and settles, and bends and blurs the contour-lined paper behind it with refraction and a thin-film sheen. The build checks contrast against the effect itself.
Needs: Node.js 18+, Chrome, and ffmpeg for the video
See what Frosted Glass Hero makes - Mesh Gradient Grain HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
Mesh Gradient Grain Hero
Animated WebGL hero · page + embed + 1080p video
A floating disc or pill of frosted glass over a slowly drifting mesh gradient. The view inside flips and magnifies, the edges split into a faint spectrum, and optional ribs flute it into strips.
Worth knowing: The gradient is soft by design, so loud, high-contrast palettes are rejected.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Mesh Gradient Grain Hero makes - Glass Keynote DeckClaude CodeCodexCursor+3 more agents
Decks · Pro
Glass Keynote Deck
HTML deck with motion + PDF + PPTX · 8–20 slides
Glassmorphism for slides: frosted panels over a dark ground lit by soft glows, with gradient numbers, glowing charts and product mock-ups. You get the HTML deck, a PDF and a PowerPoint file with editable text.
Worth knowing: The panels animate in the browser, not inside PowerPoint.
Needs: Node.js 18+, Chrome for the checks and exports; pptxgenjs only for the PowerPoint file
See what Glass Keynote Deck makes
Install
Build a glassmorphism with your agent
Each skill is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Frosted Glass Hero; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Frosted Glass Hero" skill from Lookbk (https://lookbk.dev/skills/frosted-glass-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add frosted-glass-hero 2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again. 3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add frosted-glass-hero2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/frosted-glass-hero
- Codex
- ~/.agents/skills/frosted-glass-hero
- Cursor
- ~/.agents/skills/frosted-glass-hero
3. Ask for the result
Describe it in plain words, for example:
Build a Frosted Glass hero for our site with our logo, colors and headline, and record a 1080p video of it for the launch post.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesHow do I make a frosted glass effect in CSS?
Give the element a background at roughly 10 to 20 percent opacity and backdrop-filter: blur(16px). Add the -webkit- prefix for Safari, a light one-pixel border and a soft shadow. It only shows when there is color behind it.
Does backdrop-filter work in every browser?
All current major browsers support it, Safari with the -webkit- prefix. Keep an @supports fallback with a near-opaque background for older ones.
Is glassmorphism bad for accessibility?
Only when text contrast is left to chance. Measure contrast against the brightest color that can pass behind the panel, and darken the tint until it meets 4.5:1 for body text.
What is the difference between glassmorphism and neumorphism?
Glassmorphism is see-through and blurs what is behind it. Neumorphism is opaque and uses paired light and dark shadows to make shapes look pressed into or raised out of the page.