Create a frosted-glass effect by giving an element a partly transparent background and applying backdrop-filter: blur(...). The filter blurs pixels behind the surface, not its text or child elements. Add a readable fallback for browsers without support, and check contrast against the actual page background.
Build a frosted-glass surface
This example puts a translucent card over a colorful background so the blur is visible. The blur amount, tint, and saturation are design choices; treat these values as a starting point, not a universal preset.
<div class="scene">
<section class="glass-card">
<h2>Frosted surface</h2>
<p>Place readable content here.</p>
</section>
</div>.scene {
min-height: 100vh;
display: grid;
place-items: center;
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%);
}
@supports not (backdrop-filter: blur(1rem)) {
.glass-card {
background: rgb(255 255 255 / 94%);
}
}- The translucent
backgroundlets the filtered backdrop show through. An opaque background conceals the effect. backdrop-filterapplies blur and saturation changes to the area behind the card. The card’s text remains sharp.- The border, rounded corners, and shadow help define the surface, but are visual styling choices rather than requirements for the filter.
- The
@supportsfallback preserves a mostly opaque card when blur is unavailable. Adjust its color and opacity to suit your design.
Choose the blur, tint, and fallback
Use enough blur to soften details behind the surface without making the background irrelevant. A stronger or weaker tint changes both the appearance and how easily text can be read. Test the card over the brightest, darkest, and most detailed parts of the background it can cover; one setting may not work equally well everywhere.
The example includes a WebKit-prefixed declaration alongside the unprefixed property. Prefix needs vary by browser, so check the browsers and embedded webviews your project supports rather than assuming a prefix is always required or sufficient. MDN marks backdrop-filter Baseline 2024, meaning it has been available across the latest devices and browser versions since September 2024, while noting that older devices and browsers may not support it: MDN’s backdrop-filter reference.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Keep text readable and accessible
Glass lets changing colors and images show through, so a text color that works in one spot may lose contrast elsewhere. Check the rendered result across the backgrounds and states users will encounter, and make the surface more opaque or change the text color if needed.
WCAG 2.2 Success Criterion 1.4.3 specifies a minimum contrast ratio of 4.5:1 for ordinary text and 3:1 for large-scale text, subject to stated exceptions such as incidental text and logotypes. See the W3C WAI explanation of contrast minimum. A fallback should remain legible too; support for blur is not a substitute for sufficient contrast.
Why backdrop-filter may not work
- The surface is opaque. Reduce the background alpha, for example by using a translucent
rgb()color. With no transparency, the effect behind the surface is hidden. - There is nothing distinct to blur. Put visible detail, color, or imagery behind the glass. Blur over a uniform area may be difficult to notice.
- An ancestor limits the backdrop. The filter operates on rendered pixels behind the element up to the nearest backdrop root. An ancestor with
opacitybelow1can establish one; inspect ancestor styles if the expected content is outside the visible blur region. MDN describes the relevant behavior in its backdrop-filter reference. - The foreground is blurry.
filter: blur(...)affects the element’s own rendering, including its content. Usebackdrop-filteron the translucent surface when the goal is to blur what is behind it while keeping the text sharp. See MDN’s guide to using filter effects. - The browser lacks support. Test in the target browser and confirm that the fallback is present and readable. Broad modern support does not guarantee support in every older browser or embedded webview.
- An ancestor or rendering context changes what is visible. Inspect ancestor properties such as
filter, masking, clipping, andmix-blend-modeas well as opacity. Backdrop-root behavior involves rendering details; the Filter Effects Level 2 draft says its definition of Backdrop Root does not yet have Working Group consensus. Consult the CSS Working Group Filter Effects Module Level 2 draft and verify behavior in your supported browsers.
Consider rendering cost on the real page
A blurred backdrop requires the browser to render an effect using content behind the glass. The sources cited here do not establish a numeric performance cost or a universal limit. Judge it on your own page and target devices, especially where the effect covers complex content or appears in many surfaces. Keep a non-blurred fallback available for unsupported browsers and decide whether the effect improves the design enough to justify its rendering work.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need an image of a page rather than a CSS implementation, ScreenshotNeo is a website screenshot API and MCP server. One GET request captures a URL; see the ScreenshotNeo documentation for options.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteRank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; these steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers indicating the page verdict and whether the shot was billed. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots.
Sign up for 1,000 free screenshots a month, with no card required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
