CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
filter: none;
filter-none
How to use
- Adjust sliders or click a preset to start.
- Optionally drop an image to preview the filter on real content.
- Copy the CSS rule or Tailwind class.
About this tool
ShowHide
Build a CSS filter chain visually — blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia and opacity — on a live preview, and copy the finished declaration. Two things about filters are worth knowing before you ship one. They are applied in the order written and the order changes the result: blurring and then brightening is not the same picture as brightening and then blurring. And any non-none filter makes the element a containing block for fixed and absolutely positioned descendants, which is the usual explanation for a position: fixed header that suddenly scrolls away after someone added a filter to a wrapper. Everything runs in the page, and the image you preview against never leaves your device.
Frequently asked questions
Why isn't blur on the slider in px tiny like a usual UI shadow?
CSS blur uses a Gaussian radius — values past ~10px are noticeable. The slider caps at 20px; bigger blurs are rarely useful in product UI.
What does 'invert' do to colors?
Replaces each channel with 255 − value. Useful for dark-mode tricks, but it inverts the entire image including photos — usually you want it only on icons or text.
Why are the unmodified sliders ignored in the output?
The CSS filter rule only includes the functions you've actually changed (e.g. brightness(100%) is the default and is omitted).
Tailwind class with arbitrary value?
Tailwind has built-in shortcuts (blur-md, contrast-125) but not every value you might pick. The arbitrary filter-[…] class lets you ship any filter as a utility — useful when prototyping.
Related tools
Image Blur
Apply Gaussian, box, or motion blur to any image directly in your browser. Adjustable radius 0-64 px, with the equivalent CSS filter string for copy-paste.
Image
CSS Flexbox Playground
Visually pick flex-direction, justify-content, align-items, and gap — copy the resulting CSS or Tailwind class.
Developer
CSS Grid Playground
Visually pick grid-template-columns / rows, gap, and item alignment — copy the CSS straight into your project.
Developer
Image Duotone Effect
Apply a two-color duotone effect to any image — pick a shadow color and a highlight color, adjust midpoint and contrast, download the result.
Image
CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)
Visual builder for the CSS clip-path property — circle, ellipse, inset or polygon, with sliders, click-to-add points and 10 shape presets.
Color & CSS
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color & CSS