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.

CSS Filter Playground

Adjust 9 CSS filter functions with sliders and watch a preview update live (drop your own image or use the built-in gradient block). Six presets — Cool, Warm, B&W, Sepia, Vintage, Inverted — get you most of the way. The output is a ready-to-paste CSS `filter` rule and a Tailwind arbitrary-value class.

—

Blur0pxBrightness100%Contrast100%Saturate100%Hue rotate0degGrayscale0%Sepia0%Invert0%Opacity100%

Drop an image to preview on (optional)or click to choose — defaults to a sample gradient

Preview

AZ Tools

CSS

filter: none;

Tailwind

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.

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 0 0

CSS Flexbox Playground

Visually pick flex-direction, justify-content, align-items, and gap — copy the resulting CSS or Tailwind class.

Developer 0 0

CSS Grid Playground

Visually pick grid-template-columns / rows, gap, and item alignment — copy the CSS straight into your project.

Developer 0 0

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. Spotify-style covers in two clicks.

Image 0 0

CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)

Visual builder for the CSS `clip-path` property — pick a shape (circle, ellipse, inset, or polygon), tweak the numbers with sliders or click the preview to add polygon points, and copy a ready-to-paste CSS declaration. 10 shape presets included (triangle, hexagon, star, arrow, message bubble, plus, …).

Color 0 0

CSS Gradient Generator

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Color 0 0