CSS Glassmorphism: How to Create a Frosted-Glass Effect
Create a frosted-glass effect with CSS `backdrop-filter`, a translucent surface, and a readable fallback. Learn how to troubleshoot blur and check contrast.
To create a frosted-glass effect in CSS, give an element a partially transparent background and apply backdrop-filter: blur(...). The filter blurs the pixels behind the element; it does not blur the text or children inside it. Add a border and shadow to define the surface, and provide a mostly opaque background for browsers that do not support the effect.
1. Build a frosted-glass surface
This complete example uses a decorative background so the blur is visible. Save it as an HTML file and open it in a browser that supports backdrop-filter.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frosted glass card</title>
<style>
* { box-sizing: border-box; }
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
font: 1rem/1.5 system-ui, sans-serif;
color: #101522;
background:
radial-gradient(circle at 20% 20%, #f7b4d8, transparent 35%),
radial-gradient(circle at 80% 70%, #8bc7f5, transparent 40%),
#27324d;
}
.glass-card {
width: min(32rem, calc(100% - 2rem));
padding: 2rem;
color: #101522;
background: rgb(255 255 255 / 68%);
border: 1px solid rgb(255 255 255 / 55%);
border-radius: 1rem;
box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%);
-webkit-backdrop-filter: blur(1rem) saturate(140%);
backdrop-filter: blur(1rem) saturate(140%);
}
.glass-card h1 { margin: 0 0 .5rem; font-size: 1.5rem; }
.glass-card p { margin: 0; }
@supports not (backdrop-filter: blur(1rem)) {
.glass-card { background: rgb(255 255 255 / 94%); }
}
</style>
</head>
<body>
<main class="glass-card">
<h1>Frosted surface</h1>
<p>The panel softens the colorful scene behind it while keeping this text sharp.</p>
</main>
</body>
</html>The blur radius, surface tint, opacity, and saturation are design choices; this is a starting example, not a universal preset. The prefixed declaration can help with browser versions that require it. Check the browsers and embedded webviews your project supports.
2. Understand the CSS recipe
backdrop-filterapplies effects to rendered pixels behind an element, up to the nearest backdrop root. Blur and saturation are separate effects that can be combined.- A translucent background lets the filtered backdrop show through. An opaque fill conceals the effect.
- A border, radius, and shadow shape and define the glass surface. These are ordinary styling choices, not a special CSS glass mode.
- The content stays sharp when the blur is on the surface through
backdrop-filter. By contrast,filter: blur(...)affects the element’s own rendered content, including its text and children.
You can tune the appearance with these common options:
| Choice | What it changes | Practical guidance |
|---|---|---|
blur(1rem) |
Softens detail behind the surface. | Use a modest radius first. A uniform background may make even a large blur hard to see. |
saturate(140%) |
Changes the color intensity of the backdrop. | Optional; remove it if the backdrop colors look too strong. |
rgb(255 255 255 / 68%) |
Sets a white tint and transparency for the surface. | Raise opacity when content behind the glass competes with the text. |
| Border and shadow | Separate the panel visually from the scene. | Keep them subtle enough that the surface remains the focus. |
| Opaque fallback | Provides a readable surface without blur support. | Use a solid or mostly opaque color and check it against the surrounding page. |
3. Check browser support and provide a fallback
MDN marks backdrop-filter as Baseline 2024: it has been available across the latest devices and browser versions since September 2024. Older devices and browsers might still lack support, so retain a fallback and check the support matrix for your product. The @supports rule in the example detects whether the unprefixed declaration is supported; it does not replace testing in the browsers you target.
The Filter Effects Module Level 2 is a draft. The CSS Working Group draft says it does not yet have Working Group consensus specifically on the definition of Backdrop Root, so treat complex ancestor and stacking behavior as something to verify in target browsers.
4. Keep text readable
The background visible through a translucent panel can change across images, gradients, and page states. Check the text against the actual rendered combinations rather than only against the panel’s nominal color. WCAG 2.2 Success Criterion 1.4.3 specifies a contrast ratio of at least 4.5:1 for ordinary text and 3:1 for large-scale text, subject to its stated exceptions. If the contrast varies too much, increase the surface opacity or use an opaque surface for that content.
5. Troubleshoot blur that does not appear
| Symptom | Likely cause | Fix |
|---|---|---|
| No visible blur | The background is opaque, or there is no detailed content behind the panel. | Use a partially transparent background and test over a colorful image or gradient with visible detail. |
| Blur looks too subtle | The backdrop is flat or the radius is small relative to the detail. | Test with a more varied backdrop, then adjust the blur radius and tint. |
| Text and icons blur too | filter: blur(...) is applied to the card or a parent. |
Apply backdrop-filter to the translucent surface, and keep foreground content outside any element-level blur. |
| Blur differs inside a nested component | An ancestor may establish a backdrop root or bound the available backdrop. For example, an ancestor with opacity below 1 can affect the region available to a child’s backdrop filter. |
Inspect ancestors for opacity, filters, masks, clipping, mix-blend-mode, and related effects. Simplify the ancestor styles and check the target browser. |
| Effect is missing on an older device or webview | The browser may not support the property. | Check the target browser matrix and confirm the mostly opaque fallback remains readable. |
| Text is hard to read | Visible imagery or color through the panel reduces contrast. | Increase the tint opacity, simplify the backdrop, or use an opaque surface; evaluate the rendered text contrast. |
6. Consider rendering cost and reliability
Backdrop blur requires the browser to render an effect over content behind the surface. Cost depends on the actual page, browser, device, and affected area; the cited sources provide no universal performance benchmark. If a page feels slow, compare the page with and without the effect on your supported devices, and consider limiting large blurred areas or using a simpler fallback. Keep the fallback in place so the design remains usable when the effect is unavailable.
7. Inspect the result with a page screenshot
Review the panel over the page states that matter: busy imagery, light and dark sections, responsive layouts, and the fallback state. A screenshot can make differences in blur, tint, and text contrast easier to compare. You can capture a page with your own browser tooling or use a screenshot API such as ScreenshotNeo.
Or skip the browser setup
To capture a page with ScreenshotNeo, make one GET request. See the ScreenshotNeo API documentation for the available options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for free and capture 1,000 screenshots a month with no card.
FAQ
Does backdrop-filter blur the glass element’s contents?
No. It filters pixels behind the element. Use filter when you intend to affect the element’s own rendered content.
Is glassmorphism a built-in CSS mode?
No. It is a visual style made from regular CSS properties, typically a translucent surface, backdrop effects, and shape styling.
Should every glass panel use the same opacity?
No. Choose the tint and opacity for the backdrop and content, then verify readability across the page states where the panel appears.
