Glassmorphism
Also called frosted glass or glass UI
A visual style where panels look like frosted glass: translucent, blurred backgrounds with a thin light border over colorful shapes.
export function GlassPricingCard() {
return (
<div className='relative grid min-h-96 place-items-center overflow-hidden bg-slate-950 p-8'>
{/* Glass only reads as glass with something vivid behind it. */}
<div className='absolute -top-16 -left-10 size-72 rounded-full bg-blue-500 blur-3xl' />
<div className='absolute -right-10 -bottom-16 size-72 rounded-full bg-pink-500 blur-3xl' />
{/* Solid slate where backdrop-filter isn't supported. */}
<article className='relative w-80 rounded-3xl border border-white/30 bg-slate-800 p-6 text-white shadow-[0_8px_32px_rgb(0_0_0/0.12)] backdrop-blur-lg backdrop-saturate-160 supports-backdrop-filter:bg-white/15'>
<h2 className='text-sm font-medium'>Pro</h2>
<p className='mt-2 text-4xl font-semibold'>
$24<span className='text-base font-normal'>/month</span>
</p>
<p className='mt-2 text-sm'>Unlimited projects and custom domains.</p>
<button
type='button'
className='mt-6 w-full rounded-full bg-white py-2.5 text-sm font-medium text-slate-900'
>
Upgrade
</button>
</article>
</div>
);
}Restyle the pricing card as glassmorphism: background rgba(255, 255, 255, 0.15), backdrop-filter: blur(16px) saturate(160%), a 1px border at rgba(255, 255, 255, 0.3), 24px radius, and a soft shadow, placed over two large blurred gradient blobs in blue and pink. Keep body text at 4.5:1 contrast, and use a solid background where backdrop-filter is not supported.
Paste into Layerwise or any AI coding tool.
What is Glassmorphism?
Glassmorphism makes cards and panels look like sheets of frosted glass floating above a colorful background. The recipe is a semi-transparent fill, backdrop-filter: blur() to soften whatever is behind, a thin light border to catch the edge, and a soft shadow. It only reads as glass when something vivid sits behind it, such as gradient blobs or a photo.
It works well for hero cards, music and media widgets, sign-in panels over imagery, and floating toolbars. Apple brought frosted blur into the mainstream with iOS 7 in 2013, and the name glassmorphism caught on around 2020.
Contrast is the main risk: text over a busy, shifting background can become hard to read. Raise the fill opacity behind text, keep the blur around 12 to 24px, and check contrast against the brightest and darkest parts of the background. Large blurred areas can also slow down low-end phones.
Often confused with
- Liquid glass
- Liquid glass is Apple’s 2025 material, which stays clearer and bends and reflects light at its edges. Glassmorphism is a flat frosted blur with a light border.
Related terms
All termsLiquid glass
Apple’s translucent interface material from 2025 that bends, reflects, and tints the content behind it, with bright highlights along its edges.
Blur
A softening effect made with CSS filter: blur() on an element itself, or backdrop-filter: blur() on whatever shows through it from behind.
Mesh gradient
A smooth, multicolor gradient where several colors blend outward from different points, like paint mixing, often used for hero backgrounds.
Aurora background
A background of soft, blurred color ribbons that drift slowly, like the northern lights, used behind hero sections and landing pages.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
