Glassmorphism generator
Build a frosted panel over a real backdrop: tint, blur, saturation, border and radius, copied as CSS or as a full set of Tailwind utilities.
Astral TravelingPharoah Sanders
2:145:48
glass.csscss
.glass {
background: rgb(255 255 255 / 0.18);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.35);
border-radius: 20px;
box-shadow: 0 8px 32px rgb(15 23 42 / 0.20);
}
usage.tsxtsx
<div class="rounded-[20px] border border-[rgb(255_255_255_/_0.35)] bg-[rgb(255_255_255_/_0.18)] shadow-[0_8px_32px_rgb(15_23_42_/_0.20)] backdrop-blur-[16px] backdrop-saturate-[160%]" />
Questions
Why is saturation part of it?+
Because real glass keeps the color of what is behind it while blur washes it out. Pushing saturation past 100% puts that color back, and it is the difference between frosted glass and a grey panel.
Why does the border matter so much?+
It is what gives the panel an edge when the backdrop behind it happens to match the tint. A single hairline at low opacity is enough, and it is the first thing to raise if the panel disappears.
Is backdrop-filter safe to use?+
Yes, with the -webkit- prefix included, which the output does. Keep in mind it repaints whatever is behind it, so a large blurred panel over a scrolling list is the one case where it costs real performance.
Related tools
CSS filter playgroundStack blur, brightness, contrast, saturation and the rest over a real photograph, and copy the result as filter, as backdrop-filter or as a Tailwind class.Box shadow generatorBuild a layered box-shadow the way real interfaces use it, a tight edge under a wide soft lift, then copy it as CSS, a Tailwind class or a theme token.Border radius generatorSet each corner on its own, read the shorthand as it collapses, and copy it as CSS, a Tailwind arbitrary value or a theme token.