CSS Filter Playground
Color
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.
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.
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
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.