CSS Filter Playground (Blur, Brightness, Hue)

Adjust every CSS filter function with live preview on your own image or the sample. Each filter has a slider; the order they appear in the CSS matters, and you can drag layers to reorder. Copy the final declaration.

Image

Filter functions

Reset Copy CSS

CSS

How to use the CSS Filter Playground (Blur, Brightness, Hue)

Drop your own image or use the sample. Adjust the sliders for each filter function — the preview updates instantly. Toggle a filter off to remove it from the CSS output. Some filters compose interestingly: blur + brightness for soft glow, grayscale + sepia for vintage tints, hue-rotate + saturate for stylised palettes.

About CSS Filter Playground (Blur, Brightness, Hue)

CSS filter is a powerful but underused property that applies graphical effects directly via the GPU — no canvas, no SVG, no preprocessing. The eight standard functions cover most needs: blur(px), brightness(%), contrast(%), grayscale(%), hue-rotate(deg), saturate(%), sepia(%), drop-shadow(). Each is computed in linear color space on the GPU, so they’re cheap to apply even to large images.

The order matters for some combinations. A blur followed by a brightness boost looks different from a brightness boost followed by a blur — the first blurs the original then brightens the blurred result; the second brightens then blurs the bright version. For most cases the difference is subtle but real.

Common use cases

• Hover effects — a subtle brightness lift on hover signals interactivity.
• Disabled states — filter: grayscale(1) opacity(0.5) for muted controls.
• Lazy-load placeholders — a blurred low-res version while the full image loads.
• Theme adaptation — dark-mode users may benefit from filter: brightness(0.9) on white-heavy images.