CSS Filter Playground
Apply blur, brightness, contrast, hue-rotate, and more. Combine filters and copy the CSS.
Last reviewed: June 2026New to this tool? Click here for instructions
How the CSS Filter Playground works
This browser tool applies the generated filter or backdrop-filter declaration directly to the preview element with local JavaScript. Slider values, presets, and copied CSS stay in the page; there is no image upload, external rendering server, or beautifier service involved.
Use Combined mode when you want to stack several filter functions, Single Filter mode when you are tuning one effect, Presets for quick starting points, and Backdrop Filter mode for frosted-glass overlays. The Backdrop mode output includes the -webkit-backdrop-filter prefixed line plus the standard property so you can paste both into production CSS.
Workflow notes
- Filter order matters:
brightness()beforecontrast()can look different from the reverse order once several functions are stacked. - Blur is expensive: large blur values and backdrop filters can cost more during scroll, animation, or fixed-position overlays. Test the final effect on the target layout.
- Keep text readable: contrast, opacity, invert, and grayscale can reduce legibility. Check foreground text after applying image or card effects.
- Use fallbacks: backdrop filters only show through transparent or semi-transparent backgrounds, so keep a usable background color for browsers or settings where the effect is unavailable.
Worked example
For a subtle product-card hover effect, start from the Warm preset, reduce sepia() to about 10%, raise saturate() to around 125%, and avoid blur unless the image is decorative. For a glass toolbar, switch to Backdrop Filter mode, set blur between 8px and 14px, keep background opacity near 0.15, then paste the copied backdrop CSS into the overlay rule.
Sources
Frequently Asked Questions
filter property, including blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), and sepia().filter changes the element itself. backdrop-filter changes the pixels behind an element, so it only becomes visible when the element has a transparent or semi-transparent background.Implementation checklist
| Check | Why it matters | Good default |
|---|---|---|
| Visual target | Decorative images, UI cards, and overlays need different filter strengths. | Start with small changes, then increase only if the effect is still clear. |
| Stacked order | Multiple filter functions are applied in sequence. | Copy the generated order exactly after approving the preview. |
| Backdrop fallback | Backdrop blur needs transparency and may not be appropriate everywhere. | Keep a readable solid or semi-transparent background. |
| Animation cost | Animating blur and backdrop blur can be heavier than animating transform or opacity. | Use short transitions and test on the real page. |
| Accessibility | Filters can make images or text harder to recognize. | Verify contrast and avoid relying on color alone. |
Example walk-through
Worked example: frosted toolbar
Use Backdrop Filter mode for the toolbar itself, not for the content behind it. A practical starting point is blur(12px) brightness(1) with a light transparent background and a border that separates the overlay from the page content.
.floating-toolbar {
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.32);
-webkit-backdrop-filter: blur(12px) brightness(1);
backdrop-filter: blur(12px) brightness(1);
}If the toolbar contains text, test it over both bright and dark page sections. Increase background opacity before increasing blur when readability is the issue.