CSS Filter Generator

CSS supports 10 filter functions: blur() adds Gaussian blur in pixels, brightness() adjusts lightness (100% = normal), contrast() adjusts tonal range, grayscale() converts to gray (100% = full gray), hue-rotate() shifts colors on the color wheel in degrees, invert() inverts colors (100% = full inversion), opacity() adjusts transparency, saturate() adjusts color intensity, sepia() applies a warm brown tone, and drop-shadow() adds a shadow following the element's alpha shape. This tool covers the first 9.

filter applies effects to the element itself and all its children — the element's own content is filtered. backdrop-filter applies effects to the area behind the element — creating frosted glass effects where the background is blurred but the element's content remains sharp. Use filter for image effects; use backdrop-filter for glass morphism UI overlays and modal backgrounds.

Yes. CSS filter accepts a space-separated list of filter functions that are applied in order from left to right. filter: grayscale(100%) contrast(150%) first converts to grayscale then increases contrast. The order matters — different orders produce different results because each function operates on the output of the previous one.

CSS filters are GPU-accelerated in all modern browsers and generally performant. However, blur() is the most expensive filter function because it requires sampling neighboring pixels — large blur radii on large elements can cause frame drops. Brightness, contrast, grayscale, saturate, and sepia are simple color matrix operations and are very fast. For animated filters, prefer opacity and avoid animating large blur values.

Yes. A common technique is filter: invert(1) hue-rotate(180deg) to invert all colors and then rotate the hue back by 180°. This approximates dark mode for images by swapping light and dark areas while preserving the original color relationships. For photos, filter: brightness(0.8) contrast(1.1) can reduce harshness on dark backgrounds. Fine-tune with this tool to find the right balance for your images.

CSS filters are applied at render time and do not modify the original image file — they are non-destructive and reversible. Unlike Photoshop or Lightroom presets, CSS filters are limited to the 10 available functions and cannot perform complex operations like selective color adjustment, curves, or channel mixing. However, for common web effects (grayscale, sepia, blur, brightness/contrast), CSS filters produce results equivalent to image editor operations at zero server processing cost.

Any non-none filter value makes the element a 'containing block' for its descendants and creates a new stacking context — and that changes what position: fixed is fixed RELATIVE TO. Normally fixed positioning anchors to the viewport, but inside a filtered ancestor, a fixed child anchors to the FILTERED element instead, so it no longer sticks to the screen as you scroll. This trips people up constantly with modals, sticky headers, and dropdowns placed inside a parent that happens to have a filter (or transform, which does the same thing). It's a spec requirement, not a bug. The fix is structural: move the fixed element OUT of the filtered ancestor in the DOM, or apply the filter to a different element that doesn't wrap your fixed content.

Yes — filters are applied left to right, each operating on the output of the previous one, so reordering them changes the result. filter: grayscale(100%) contrast(150%) first strips color, THEN boosts the contrast of the resulting grays; filter: contrast(150%) grayscale(100%) boosts contrast on the colored image first, then desaturates, producing a different tonal result. The same is true for hue-rotate before vs after saturate, or blur before vs after brightness. When an effect doesn't look how you expect, try swapping the function order. This is also why building a 'look' is iterative — small reorderings of the same functions give meaningfully different outputs, which the live preview here lets you explore quickly.