Glassmorphism is that frosted glass look you see in modern interfaces, soft blur, translucency, subtle border, and glossy highlights. In this tutorial, I will show you how to create glassmorphism effects using CSS, step by step. You will learn the core idea first, then try two examples you can paste into any browser. The first is a quick single div demo. The second is a complete layout with a glassy navbar and cards. If you are new to CSS, do not worry, I will explain each moving part in plain language.
What is glassmorphism
Glassmorphism mimics a sheet of glass placed over a colorful background. You can see the colors behind it, but they are blurred and softened. The effect depends on three things:
- A vibrant background behind the glass
- A semi transparent panel on top
- A blur that applies to what is behind the panel, not the panel itself
In CSS, the magic property is backdrop-filter. This property blurs whatever is behind the element. To get the look right, I also add a soft border, a subtle highlight, and a shadow.
The core CSS behind the effect
Here are the key ingredients you will use.
- Semi transparent background. This lets the colors behind show through.
background: rgba(255, 255, 255, 0.12);
- Blur on the backdrop. This is applied to the backdrop, not the element’s own content.
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* Safari */
- Subtle border and rounded corners. This outlines the glass.
border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 16px;
- Soft shadow. This lifts the glass from the background.
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
- Optional highlight. A faint white gradient across the panel sells the “gloss”.
background-image: linear-gradient(to top left, rgba(255,255,255,0.28), rgba(255,255,255,0.05));
- Fallback for browsers without
backdrop-filter. I default to a more opaque background so text stays readable.
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: rgba(255, 255, 255, 0.85); }
}
How to create glassmorphism effects using CSS, step by step
- Create a colorful background first. Without contrast behind the panel, the blur looks flat. I like radial and linear gradients. For example:
body {
background:
radial-gradient(60% 50% at 20% 30%, #ff6b6b33 0%, transparent 70%),
radial-gradient(50% 60% at 80% 60%, #4dabf733 0%, transparent 70%),
linear-gradient(135deg, #0ea5e9 0%, #9333ea 100%);
}
- Add a panel with a translucent background, a border, and a shadow.
.glass {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
- Apply
backdrop-filter. This is the key part. Safari also needs the-webkit-prefix.
.glass {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
- Tweak readability. Use darker text and bump contrast if the background is very bright.
.glass {
color: #0f172a; /* deep slate */
}
- Add a fallback. When
backdrop-filteris not supported, raise the opacity so users can still read content.
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: rgba(255,255,255,0.85); }
}
That is the essence of how to create glassmorphism effects using CSS. Now let us build the two examples.
Example 1, a short and quick glass panel
Paste this into a new file and open it in your browser. It is a minimal demo based on a single glass div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Glassmorphism CSS - Minimal Example</title>
<style>
:root {
--blur: 16px;
--glass-bg: rgba(255, 255, 255, 0.12);
--glass-border: rgba(255, 255, 255, 0.35);
--text: #0f172a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
color: var(--text);
display: grid;
place-items: center;
min-height: 100dvh;
padding: 24px;
background:
radial-gradient(60% 50% at 20% 30%, #ff6b6b33 0%, transparent 70%),
radial-gradient(50% 60% at 80% 60%, #4dabf733 0%, transparent 70%),
linear-gradient(135deg, #0ea5e9 0%, #9333ea 100%);
}
.glass {
width: min(92vw, 480px);
padding: 24px 28px;
border-radius: 16px;
border: 1px solid var(--glass-border);
background:
linear-gradient(to top left, rgba(255,255,255,0.28), rgba(255,255,255,0.05)),
var(--glass-bg);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.glass h1 { margin: 0 0 10px; font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
.glass p { margin: 0; line-height: 1.5; font-size: 1rem; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: rgba(255, 255, 255, 0.85); }
}
</style>
</head>
<body>
<div class="glass" role="region" aria-label="Glass card">
<h1>Glassmorphism with CSS</h1>
<p>This is a frosted glass panel. The color behind is blurred with <code>backdrop-filter</code>, the panel is translucent, and a subtle border plus shadow completes the effect.</p>
</div>
</body>
</html>
Output:
What to notice:
- The background has colorful gradients. That gives blur something to work with.
- The panel uses a translucent white background, a border, a shadow, and a gradient highlight.
- The
@supportsblock raises opacity when blur is not available.
Example 2, a complete glassmorphism UI with a navbar and cards
This is a more realistic layout that shows how to create glassmorphism effects using CSS in a small page. It has a glassy navbar, a hero card, and a responsive grid of feature cards. Paste into a new file and open in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Glassmorphism CSS - Complete Demo</title>
<style>
:root{
--blur: 18px;
--glass: rgba(255,255,255,0.12);
--border: rgba(255,255,255,0.35);
--text: #0f172a;
--muted: #334155;
--accent: #22c55e;
}
*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
color: var(--text);
background:
radial-gradient(60% 50% at 15% 20%, #f9731633 0%, transparent 70%),
radial-gradient(45% 55% at 85% 30%, #22c55e33 0%, transparent 65%),
radial-gradient(50% 60% at 40% 85%, #06b6d433 0%, transparent 60%),
linear-gradient(135deg, #0ea5e9 0%, #9333ea 100%);
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
}
/* Shared glass look */
.glass{
background:
linear-gradient(to top left, rgba(255,255,255,0.28), rgba(255,255,255,0.05)),
var(--glass);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
}
header{
position: sticky; top: 0;
padding: 12px clamp(12px, 4vw, 28px);
z-index: 10;
}
.nav{
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
}
.brand{ font-weight: 700; letter-spacing: 0.2px; }
.nav a{
text-decoration: none;
color: var(--text);
opacity: 0.9;
font-weight: 600;
font-size: 0.95rem;
}
.actions{
display: flex; gap: 10px; align-items: center;
}
.btn{
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.18);
color: var(--text);
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, background-color 0.2s ease;
backdrop-filter: blur(calc(var(--blur) / 2));
-webkit-backdrop-filter: blur(calc(var(--blur) / 2));
}
.btn:is(:hover, :focus-visible){
transform: translateY(-1px);
background: rgba(255,255,255,0.28);
outline: none;
}
.btn.primary{
background: linear-gradient( to bottom right, rgba(255,255,255,0.35), rgba(255,255,255,0.12) );
color: #0b1220;
border-color: rgba(255,255,255,0.45);
}
main{ padding: clamp(16px, 4vw, 32px); }
.hero{
max-width: 980px; margin: 0 auto 24px;
padding: clamp(18px, 3.5vw, 28px);
text-align: center;
}
.hero h1{
margin: 0 0 8px;
font-size: clamp(1.5rem, 4.5vw, 2.25rem);
}
.hero p{
margin: 0 auto 16px;
max-width: 60ch;
color: var(--muted);
line-height: 1.55;
font-size: clamp(1rem, 2.5vw, 1.125rem);
}
.grid{
max-width: 1100px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.card{
padding: 16px;
display: grid;
gap: 8px;
min-height: 140px;
}
.icon{
width: 40px; height: 40px; border-radius: 10px;
display: grid; place-items: center;
font-weight: 800;
color: #0b1220;
background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
border: 1px solid rgba(255,255,255,0.55);
}
.card h3{ margin: 0; font-size: 1.05rem; }
.card p{ margin: 0; color: var(--muted); line-height: 1.55; }
footer{
padding: 18px clamp(16px, 4vw, 28px);
text-align: center;
color: rgba(15, 23, 42, 0.8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass, .btn { background: rgba(255,255,255,0.85); }
}
@media (prefers-color-scheme: dark) {
:root { --text: #e5e7eb; --muted: #cbd5e1; }
body { color: var(--text); }
.btn.primary{ color: #111827; }
}
</style>
</head>
<body>
<header>
<nav class="nav glass" aria-label="Main navigation">
<div class="brand">GlassUI</div>
<div class="actions">
<a href="#" aria-label="Docs">Docs</a>
<a href="#" aria-label="Components">Components</a>
<button class="btn" type="button">Sign in</button>
<button class="btn primary" type="button">Get started</button>
</div>
</nav>
</header>
<main>
<section class="hero glass" aria-labelledby="hero-title">
<h1 id="hero-title">Glassmorphism with pure CSS</h1>
<p>Create frosted glass panels, clean borders, and glowing highlights. This complete example shows a navbar, a hero panel, and responsive cards that adapt to your screen.</p>
<button class="btn primary" type="button">Build your first card</button>
</section>
<section class="grid" aria-label="Feature cards">
<article class="card glass">
<div class="icon">A</div>
<h3>Accessible</h3>
<p>Readable text and strong contrast. Use a fallback when blur is not supported.</p>
</article>
<article class="card glass">
<div class="icon">P</div>
<h3>Performant</h3>
<p>Use moderate blur and keep element count reasonable for smooth scrolling.</p>
</article>
<article class="card glass">
<div class="icon">C</div>
<h3>Customizable</h3>
<p>Tweak blur, border, and background gradients to match your brand.</p>
</article>
<article class="card glass">
<div class="icon">R</div>
<h3>Responsive</h3>
<p>The grid adapts from phones to desktops without extra code.</p>
</article>
</section>
</main>
<footer>
Built with HTML and CSS only. No images, just gradients and blur.
</footer>
</body>
</html>
Output:
Practical tips and common gotchas
- Always place your glass over a colorful or detailed background. If the backdrop is flat,
backdrop-filterwill not be noticeable. - Keep blur values reasonable, 10 to 22 pixels is a sweet spot. Very high blur can hurt performance on low end devices.
- Use
-webkit-backdrop-filterfor Safari. The@supportsfallback keeps your UI usable in Firefox without flags. - Do not forget the border. A thin white border with reduced opacity creates a crisp edge that looks like cut glass.
- Test on mobile. Both examples above are responsive and use relative units that adapt to narrow screens.
Closing thoughts
That is how I create glassmorphism effects using CSS, from the core idea to complete, testable examples. You learned the purpose of backdrop-filter, how to set up a background that makes the blur shine, and how to balance transparency, border, and shadow for that polished result. Try tweaking the blur, color stops, and opacity values, small changes go a long way. With these patterns in your toolkit you can add modern, glassy depth to cards, navbars, and modals without images or extra libraries.
