Neon DistrictISSUE #12 of 50

backdrop-filter · frosted glass

PrismaVSJank the Janitor

Prisma saysbackdrop-filter blurs or tints whatever is behind an element — the frosted-glass effect.

While filter affects the element, backdrop-filter affects what's behind it. With a semi-transparent background plus backdrop-filter: blur(10px), you get the frosted-glass look used in modern overlays and navbars. The element must be translucent for the backdrop to show.

Power-ups you unlock

backdrop-filter blurs/tints the area behind
Needs a translucent background to show through
The classic frosted-glass overlay/navbar look
May need a -webkit- prefix

Jank the Janitor attacks — common mistakes

Opaque background hiding the effect
Heavy backdrop blur tanking scroll performance
Forgetting the -webkit- prefix

Boss battleMake a frosted-glass card over a colorful background.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>body{background:linear-gradient(45deg,#b388ff,#8aff9d);margin:0;height:100vh;display:grid;place-items:center}.glass{background:rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:30px;border-radius:12px;color:#fff}</style></head><body><div class="glass">frosted glass</div></body></html>

▶ Open the interactive comic issue

‹ Filter · Blur · Brightness · Contrast Mix-Blend-Mode · Stacking Blend ›