CSS Filter Playground
Drag the sliders and watch the live preview update. Upload your own image or stick with the sample.
How to Use
Use the sample or upload your own image. A text element shows how filters affect non-image content too.
Nine sliders for blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia, invert, and opacity. Each has a one-click reset to default.
Copy the resulting filter declaration. Filters at their no-op default are automatically omitted from the output.
FAQ
What is CSS filter for?
Apply visual effects like blur, grayscale, or hue rotation to elements. Useful for hover effects, dark mode treatments, and disabled-state visuals.
Can I stack multiple filters?
Yes. CSS filter accepts multiple functions separated by spaces (e.g., filter: blur(2px) grayscale(50%)). This tool emits all active sliders as one declaration.
How is this different from backdrop-filter?
filter applies to the element itself; backdrop-filter applies to what's *behind* the element. Glass-morphism effects use backdrop-filter (this tool covers only filter).
Does it work on mobile?
Yes. CSS filter is supported by all modern browsers including iOS Safari and Android Chrome. Heavy filters like blur on large elements may have performance impact.
Is anything sent to a server?
No. Uploaded images stay in your browser for preview only, and the generated CSS never leaves the page.
