CSS filter playground
Stack 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.
filter.csscss
.photo {
filter: brightness(110%) contrast(105%) saturate(120%);
}
backdrop.csscss
.panel {
backdrop-filter: brightness(110%) contrast(105%) saturate(120%);
-webkit-backdrop-filter: brightness(110%) contrast(105%) saturate(120%);
}
usage.tsxtsx
<img class="[filter:brightness(110%)_contrast(105%)_saturate(120%)]" />
Questions
What is the difference between filter and backdrop-filter?+
filter paints the element itself; backdrop-filter paints whatever is behind it. The same stack works in both, which is why the output lists them together: one is a photo treatment, the other is glass.
Does the order of the functions matter?+
Very much. Each one takes the result of the last, so blur then contrast is not contrast then blur. The order here is the order they are written in.
Is a filter expensive?+
Blur is, especially as a backdrop over a scrolling area, since it repaints continuously. The rest are cheap. Keep a heavy blur off anything that moves every frame.
Related tools
Glassmorphism generatorBuild a frosted panel over a real backdrop: tint, blur, saturation, border and radius, copied as CSS or as a full set of Tailwind utilities.Clip path generatorCut a real photo into a hexagon, circle, chevron or inset, tune the amount, then copy the clip-path as CSS or as a Tailwind arbitrary value.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.