UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Filter Playground

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

About CSS Filter Playground

CSS filters let you apply photo editing effects — blur, brightness, contrast, grayscale, hue rotation, saturation, sepia, and drop-shadow — directly in the browser without Photoshop or Canvas. They are useful for image overlays, dynamic theming, hover effects on product photos, and creating unified visual treatments for mixed-source images. The CSS Filter Playground stacks filter functions on a real sample image with independent sliders for each function. Drag brightness down and contrast up for a moody editorial look, add sepia and desaturate for vintage warmth, or pile on hue-rotate for a psychedelic color shift. Preset styles like vintage, B&W, and polaroid load a tuned starting point. The output is a single filter declaration ready to paste.

Why use CSS Filter Playground

All Filter Functions

Eight filter primitives in one panel: blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, and drop-shadow. No need to look up function names or parameter units — each has a slider scaled to its natural range so values stay meaningful.

Stack Order

CSS filters apply left to right, so contrast applied after sepia differs from sepia applied after contrast. The reorderable stack lets you test sequences without editing text, making it easy to find the combination and order that produces the intended visual result.

Live Image

The preview shows filter effects on a real photograph rather than a colored square. Photo content makes filter interactions visible — the effect of +20% contrast or a 90-degree hue rotation is obvious on facial skin tones and skies but can be misleading on a flat color swatch.

Vintage Presets

One-click presets for sepia+contrast+desaturate vintage, pure grayscale, high-contrast B&W, and soft-fade polaroid load industry-standard starting points. Each preset is a tuned combination of three or four filter functions that work well together rather than a single crude filter.

Drop Shadow

The drop-shadow filter renders a shadow that follows the actual alpha boundary of an image, not its rectangular bounding box. This makes it essential for PNG icons, logos, and cutout images where box-shadow would only shadow the invisible rectangle.

Copy CSS

The output is a single filter property with all active functions in the order you set them, using the correct units for each type: px for blur, percentages for brightness/contrast/saturate, and degrees for hue-rotate. Paste it directly into any CSS rule.

How to use CSS Filter Playground

  1. Enable the filter functions you want by toggling their switches
  2. Drag each filter's amount slider to set the intensity
  3. Reorder filters by dragging the order handles to test how sequence affects the result
  4. Click a preset (vintage, B&W, soft, polaroid) to load a ready-made filter stack
  5. Preview the effect on the sample image and optionally upload your own test image
  6. Click Copy CSS to capture the combined filter declaration

When to use CSS Filter Playground

  • 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 adding a drop-shadow to a PNG logo or icon that correctly traces the transparent edges
  • When creating vintage or branded photo filters for a marketing page or portfolio

Examples

Vintage photo

Input: sepia: 0.5, contrast: 1.1, brightness: 0.95, saturate: 0.8

Output: filter: sepia(0.5) contrast(1.1) brightness(0.95) saturate(0.8);

Soft blur backdrop

Input: blur: 8px, brightness: 0.7

Output: filter: blur(8px) brightness(0.7);

Crisp drop shadow on PNG

Input: drop-shadow: 0 4px 12px rgba(0,0,0,0.25)

Output: filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));

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.
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 grayscale(1) with slight contrast(1.1) or brightness(0.95) adjustments to add tonal depth rather than flat gray. The playground's B&W preset includes these refinements.
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 Playground Prototype grid templates, gaps, and alignment with a responsive preview and CSS export. 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.