On this page

CSS Filters & backdrop-filter (Glassmorphism)

Badar KhalilUpdated September 29, 2026 6 min read

What Are CSS Filters and backdrop-filter?

The CSS filter property applies graphical effects, such as blur or color shifts, to an element and everything inside it. The backdrop-filter property applies those effects to the area behind an element, which is the secret of the popular glassmorphism (frosted glass) design style. Our focus keyword is CSS filters, and this lesson also covers trending searches: glassmorphism CSS, backdrop-filter blur, CSS grayscale hover effect, frosted glass navbar, drop-shadow filter, CSS image effects, and filter performance.

1. The filter Property and Its Functions

Function	What it does	Example
`blur()`	Gaussian blur; takes a length	`blur(4px)`
`brightness()`	Lightens or darkens; 1 is normal	`brightness(1.2)`
`contrast()`	Changes contrast; 1 is normal	`contrast(150%)`
`grayscale()`	Removes color; 0 to 1	`grayscale(1)`
`sepia()`	Warm vintage tone	`sepia(.8)`
`saturate()`	Boosts or reduces color intensity	`saturate(1.8)`
`hue-rotate()`	Rotates hue on the color wheel	`hue-rotate(90deg)`
`invert()`	Inverts colors; 0 to 1	`invert(1)`
`opacity()`	Transparency as a filter	`opacity(.5)`
`drop-shadow()`	Shadow following the visible shape	`drop-shadow(0 4px 6px rgb(0 0 0 / 30%))`
`url()`	Reference an SVG filter	`url(#noise)`

2. Chaining Filters

Separate several functions with spaces: filter: grayscale(.6) contrast(1.1) brightness(1.05);. Order matters, because each function is applied to the result of the previous one. filter: none removes all filters.

3. Common Filter Use Cases

Hover effects: grayscale images that turn colorful on hover.
Disabled states: grayscale(1) opacity(.6).
Dark mode images: slightly lower brightness or contrast for photos.
Icons: invert(1) to switch black icons to white.
Blurring content: hide sensitive information, or blur the page behind a modal.
Shapes with transparency: drop-shadow() on PNG, SVG or clipped elements.

4. What Is backdrop-filter?

backdrop-filter uses the same functions as filter, but applies them to everything visible behind the element, within the element's border box (rounded corners are respected). The element itself, and its text, stay sharp. For the effect to be visible, the element must have a semi-transparent background.

Code

.glass {
  background: rgb(255 255 255 / 15%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 16px;
}

5. Glassmorphism Recipe

Place a colorful, detailed background behind the card (gradient, image or blobs). A plain white background hides the effect.
Give the card a translucent background: rgb(255 255 255 / 10-25%).
Add backdrop-filter: blur(10px to 20px), optionally with saturate(150%) to keep colors lively.
Add a thin light border (1px solid rgb(255 255 255 / 30%)) to imitate the edge of glass.
Add a soft shadow for depth: 0 8px 32px rgb(0 0 0 / 20%).
Check text contrast carefully.

6. filter vs backdrop-filter

	filter	backdrop-filter
Affects	The element and its children	Content behind the element
Needs transparency	No	Yes (translucent background)
Creates stacking context	Yes	Yes
Typical use	Image effects, disabled states	Frosted glass navbars, modals, cards

7. Browser Support and Fallbacks

filter is supported everywhere. backdrop-filter works in all current major browsers, though older Safari versions need the -webkit-backdrop-filter prefix, so include both. Provide a fallback with @supports:

Code

.glass { background: rgb(15 23 42 / 90%); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass { background: rgb(255 255 255 / 15%); backdrop-filter: blur(12px); }
}

8. Performance

Blur is GPU heavy. Large blur radii on big areas can drop frame rates, especially on mobile and while scrolling.
Keep backdrop-filter elements small (navbars, cards) and avoid stacking many of them.
Do not animate blur radius on large elements. Fade opacity instead.
Fixed or sticky elements with backdrop-filter are fine, but test scrolling on real devices.

9. Accessibility

Glass cards sit over changing backgrounds, so text contrast can drop. Use a slightly darker translucent tint or add a solid fallback behind text.
Respect users who prefer less transparency: @media (prefers-reduced-transparency: reduce) can switch to a solid background where supported.
Do not use blur to hide information that must stay private, since it is only visual.

Best Practices

Use subtle values: blur 8 to 16px, background alpha 10 to 25%.
Always add the -webkit- prefixed backdrop-filter.
Use drop-shadow() for non-rectangular shapes and box-shadow for boxes.
Animate filter values with transitions on small elements only.

Common Mistakes

Using backdrop-filter with a solid opaque background, so nothing is visible.
Expecting filter: blur() to blur only the background. It blurs the element and its text.
Forgetting that a filter creates a new stacking context and containing block for fixed-position children.
Applying heavy filters to many elements at once.

Summary

CSS filters transform how elements look, from grayscale hovers to drop-shadows, and backdrop-filter blurs what lies behind an element to create glassmorphism. Combine a translucent background, blur, a thin border and a soft shadow, keep it light for performance, and check contrast. Explore the examples below.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .t { display: inline-block; width: 110px; height: 90px; margin: 6px; border-radius: 10px; color: #fff; font-size: 12px; padding: 6px; background: conic-gradient(from 90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); }
</style>
<div class='t'>original</div>
<div class='t' style='filter: blur(3px)'>blur(3px)</div>
<div class='t' style='filter: grayscale(1)'>grayscale(1)</div>
<div class='t' style='filter: sepia(.9)'>sepia(.9)</div>
<div class='t' style='filter: hue-rotate(90deg)'>hue-rotate(90deg)</div>
<div class='t' style='filter: saturate(2) brightness(1.1)'>saturate + brightness</div>
<div class='t' style='filter: invert(1)'>invert(1)</div>
<div class='t' style='filter: contrast(2)'>contrast(2)</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .img { width: 220px; height: 150px; border-radius: 12px; background: conic-gradient(from 45deg, #f43f5e, #f59e0b, #10b981, #3b82f6, #f43f5e); filter: grayscale(1) brightness(.9); transition: filter .4s, transform .4s; margin: 10px; display: inline-block; }
  .img:hover { filter: grayscale(0) brightness(1.05); transform: scale(1.03); }
  .disabled { display: inline-block; padding: 10px 20px; background: #2563eb; color: #fff; border-radius: 8px; font-family: sans-serif; filter: grayscale(1) opacity(.5); }
</style>
<div class='img'></div><span class='disabled'>Disabled button</span>
<p style='font-family:sans-serif'>Hover the box to bring the color back.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: sans-serif; }
  .scene { min-height: 300px; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 25%, #f472b6 0 90px, transparent 91px), radial-gradient(circle at 80% 70%, #22d3ee 0 110px, transparent 111px), linear-gradient(135deg, #4f46e5, #7c3aed); }
  .glass { width: 280px; padding: 24px; color: #fff; background: rgb(255 255 255 / 15%); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgb(255 255 255 / 30%); border-radius: 18px; box-shadow: 0 8px 32px rgb(0 0 0 / 25%); }
  .glass h3 { margin: 0 0 8px; }
</style>
<div class='scene'><div class='glass'><h3>Glassmorphism</h3><p>Frosted glass card with backdrop-filter, a translucent background and a thin light border.</p></div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: sans-serif; height: 260px; overflow: auto; background: linear-gradient(180deg, #fde68a, #f472b6, #60a5fa, #34d399); }
  nav { position: sticky; top: 0; display: flex; gap: 18px; padding: 14px 20px; background: rgb(255 255 255 / 30%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(255 255 255 / 40%); }
  nav a { color: #0f172a; text-decoration: none; font-weight: bold; }
  .blob { height: 90px; margin: 18px; border-radius: 16px; background: rgb(15 23 42 / 70%); }
</style>
<nav><a href='#'>Home</a><a href='#'>Courses</a><a href='#'>Contact</a></nav>
<div class='blob'></div><div class='blob'></div><div class='blob'></div><div class='blob'></div>
<p style='padding:0 20px'>Scroll: the sticky nav blurs the content moving under it.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; padding: 24px; }
  .tri { width: 120px; height: 110px; background: #f59e0b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .wrap { display: inline-block; margin: 20px; }
  .box-sh .tri { box-shadow: 0 10px 14px rgb(0 0 0 / 50%); }
  .drop { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 50%)); }
  .glass-fb { margin-top: 16px; padding: 16px; border-radius: 12px; background: rgb(15 23 42 / 90%); color: #fff; }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .glass-fb { background: rgb(15 23 42 / 40%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
</style>
<div class='wrap box-sh'><div class='tri'></div></div> box-shadow is clipped away
<div class='wrap drop'><div class='tri'></div></div> drop-shadow follows the shape
<div class='glass-fb'>@supports fallback: solid tint if backdrop-filter is unsupported</div>

Output

Press Run to execute.

Exercise: Build a Glassmorphism CardHTML

Style .glass so it looks like frosted glass: translucent white background (about 15%), backdrop-filter blur of 12px with the -webkit- prefix, a 1px semi-transparent white border, 16px radius and a soft shadow. The card sits over a colorful gradient background.

Try it Yourself HTML

<style>
  .scene { min-height: 260px; display: grid; place-items: center; background: linear-gradient(135deg, #ec4899, #6366f1, #06b6d4); }
  .glass { padding: 24px; color: #fff; font-family: sans-serif; /* your code */ }
</style>
<div class='scene'><div class='glass'>Frosted glass card</div></div>

Output

Press Run to execute.

Show expected output

A translucent, blurred card with a light border over the colorful background.

This is a self-check — compare your result with the expected output above.

Exercise: Grayscale Image Gallery HoverHTML

Make every .thumb grayscale by default. On hover, remove the grayscale, slightly increase brightness and add a smooth 0.3s transition.

Try it Yourself HTML

<style>
  .thumb { display: inline-block; width: 140px; height: 100px; margin: 8px; border-radius: 10px; background: linear-gradient(135deg, #f43f5e, #f59e0b, #22c55e); /* your code */ }
  .thumb:hover { /* your code */ }
</style>
<div class='thumb'></div><div class='thumb'></div><div class='thumb'></div>

Output

Press Run to execute.

Show expected output

Gray thumbnails that turn colorful and brighter on hover.

This is a self-check — compare your result with the expected output above.

Quiz: Filters & Glassmorphism Quiz Pass 70%

Loading quiz…

Was this page helpful?