Developer

CSS Filter Playground

Stack blur, color, and tonal CSS filters with sliders and copy-ready filter declarations.

Loading interactive tool…

Embed this tool on your site

About this tool

CSS filters let you apply photo-editing style effects — blur, brightness, contrast, saturation, grayscale and hue rotation — directly in the browser without an image editor or Canvas. They are useful for image overlays, dynamic theming, hover effects on product photos, and unified visual treatments for mixed-source images. The CSS Filter Playground gives each of six filter functions its own slider: Blur (0–20px), Brightness and Contrast (0–200%), Saturate (0–300%), Grayscale (0–100%) and Hue Rotate (0–360deg). The preview is a colorful gradient panel, so hue, saturation and grayscale changes are easy to see. Drag brightness down and contrast up for a moody look, or shift hue-rotate for a color swap. Reset returns every slider to neutral. The output is a single filter declaration that always lists all six functions in a fixed order, ready to paste.

Why use it

  • Six Filter Functions: blur, brightness, contrast, saturate, grayscale and hue-rotate each get a slider scaled to a useful range, so you never need to look up function names or units.

  • Fixed Order: The output always lists blur, brightness, contrast, saturate, grayscale, then hue-rotate. Filters apply left to right, so the preview shows exactly what that sequence produces.

  • Colorful Preview: The preview panel is a multi-color gradient — blue, pink and green blobs on a dark background — which makes hue, saturation and grayscale changes obvious at a glance.

  • Reset Button: One click returns all six sliders to their neutral values, so you can start a new treatment without reloading the page.

  • Copy CSS: The output is a single filter property using the correct units for each type: px for blur, percentages for brightness, contrast, saturate and grayscale, and degrees for hue-rotate. Every function is included, even at neutral values.

How to use

  1. Drag the Blur slider (0–20px)
  2. Adjust Brightness and Contrast (0–200%, where 100% means unchanged)
  3. Adjust Saturate (0–300%) and Grayscale (0–100%)
  4. Shift colors with Hue Rotate (0–360deg)
  5. Check the effect on the gradient preview panel; click Reset to return every slider to neutral
  6. Click Copy CSS to capture the combined filter declaration

When it helps

  • When applying a consistent visual treatment to mixed-source product photos so they read as a unified collection
  • When creating a hover effect on a grayscale image that switches to full color on hover
  • When adding a frosted blur to a background image behind a modal or card
  • When building a dark-mode image treatment that desaturates or darkens photos automatically
  • When testing hue-rotate values to recolor a single-color illustration or icon
  • When creating muted or high-contrast photo treatments for a marketing page or portfolio

Examples

Muted photo

Input
Brightness 95, Contrast 110, Saturate 80 (others neutral)
Expected result
filter: blur(0px) brightness(95%) contrast(110%) saturate(80%) grayscale(0%) hue-rotate(0deg);

Soft blur backdrop

Input
Blur 8, Brightness 70 (others neutral)
Expected result
filter: blur(8px) brightness(70%) contrast(100%) saturate(100%) grayscale(0%) hue-rotate(0deg);

Black and white

Input
Contrast 110, Grayscale 100 (others neutral)
Expected result
filter: blur(0px) brightness(100%) contrast(110%) saturate(100%) grayscale(100%) hue-rotate(0deg);

Tips

  • filter: drop-shadow() follows PNG and SVG alpha channels; use it on logos and icons instead of box-shadow which only shadows the bounding rectangle
  • Stack sepia(0.4) + contrast(1.1) + brightness(0.95) for a richer vintage look than sepia alone — the contrast layer adds tonal depth that single sepia lacks
  • filter creates a new stacking context on the element, which can cause z-index of children to behave unexpectedly — test stacking around glass panels and dropdowns after applying
  • Use will-change: filter only on elements that actively animate filter values; adding it statically to many elements wastes GPU memory
  • hue-rotate(180deg) inverts all hue values without touching brightness or saturation — useful for creating dark-mode color inversions that preserve image contrast

Frequently Asked Questions

What is the difference between filter and backdrop-filter?
filter applies effects to the element itself and all its children. backdrop-filter applies effects to the content rendered behind the element. For a frosted glass effect, you need backdrop-filter; to style an image or icon, you use filter.
How is drop-shadow filter different from box-shadow?
box-shadow creates a shadow matching the element's rectangular border box, ignoring transparency. filter: drop-shadow() creates a shadow that follows the element's actual alpha channel, correctly tracing around PNG cutouts, SVGs with transparent areas, and irregular shapes. This playground does not include drop-shadow; add it to the copied declaration by hand.
Why does filter order change the visual result?
Each filter function operates on the output of the previous one. Applying sepia first, then increasing contrast, amplifies the sepia tones. Applying contrast first, then sepia, amplifies the original color contrast before desaturating. Order produces meaningfully different results even with identical slider values.
Can I animate filters with transitions?
Yes. filter is interpolatable via CSS transitions and @keyframes. Transitioning from grayscale(1) to grayscale(0) on hover creates a smooth color-desaturate-to-color effect. Keep animated blur values modest to avoid paint performance issues on large elements.
Does filter affect performance on large images?
Filters are GPU-composited in modern browsers and generally perform well on static images. Blur filters are the most expensive since they require sampling neighboring pixels. Animating blur on a full-width hero image can drop frame rates — test on lower-end devices before shipping.
How do I make a black-and-white photo with CSS?
Apply filter: grayscale(1) or grayscale(100%) to remove all color. For a more polished B&W look, combine it with slightly higher contrast or slightly lower brightness. In this playground, set Grayscale to 100% and Contrast to about 110%.
What unit does hue-rotate take?
hue-rotate() takes a degree value: hue-rotate(90deg) shifts all hues 90 degrees around the color wheel. 180deg inverts hues. 360deg returns to the original. No suffix (0 rather than 0deg) also works for zero values. Negative values rotate in the opposite direction.
Why does blur make my element bleed past its edges?
CSS blur samples pixels beyond the element's boundary, causing blurred content to visually overflow. Add overflow: hidden to the element or its parent to clip the bleed, or use a slightly inset content approach where there is sufficient non-blurred margin around the content to absorb the blur spread.

Explore the category

CSS Spinner Generator Browse spinner presets, tweak size speed and color, and copy animation-ready CSS. CSS Gradient Generator Create linear or radial gradients with stops, angles, and copy-ready background snippets. Box Shadow Generator Tune blur, spread, offsets, color, and inset shadows with an instant CSS preview. Scrollbar Styler Tint scrollbar thumbs and tracks for WebKit and Firefox using copy-ready pseudo-element CSS. CSS Grid Generator Build a CSS grid visually: set columns, rows and gaps, drag across cells to place items, then copy the HTML and CSS. CSS Keyframes Generator Compose starter animations with timing controls and copy @keyframes blocks.
CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min CSS Custom Properties (Variables) Explained with Real Examples CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Apr 2026 · 8 min

Glossary

Filter Function
An individual effect applied within the CSS filter property, such as blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), saturate(), sepia(), or drop-shadow().
Hue Rotation
The hue-rotate() filter function that shifts all color hues by a given angle in degrees around the HSL color wheel. Does not affect brightness or saturation.
Saturate
The saturate() filter function that amplifies (above 1) or reduces (below 1) color intensity. saturate(0) produces grayscale; saturate(2) produces highly vivid colors.
Drop Shadow
The drop-shadow() filter function that renders a shadow following the element's actual alpha-channel boundary rather than its bounding box, unlike box-shadow.
Backdrop Filter
A separate CSS property from filter that applies filter effects to the content rendered behind the element, used for frosted glass and blur overlay effects.
Convolution
The mathematical operation underlying blur and sharpening filters, where each output pixel is a weighted average of neighboring input pixels according to a kernel matrix.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities