What is the difference between CSS filter and SVG filter?

CSS filter provides a simplified set of common effects with a clean syntax. SVG filter offers much more power with arbitrary compositing operations, displacement maps, turbulence, and custom kernels.

How do I create a vintage photo effect?

Combine sepia and contrast: filter: sepia(0.5) contrast(1.2) brightness(1.05). For black & white: filter: grayscale(1) contrast(1.1). Experiment with small increments for natural-looking results.

CSS Filter Generator

Create CSS image filter effects visually — blur, brightness, contrast, grayscale and more.

9 filter functionsLive previewImage upload

① Drag sliders to adjust filters ② Upload your image to preview ③ Copy the CSS

🖼Click to upload image

Presets

filter: none

Brightness

Contrast

Saturation

Grayscale

Sepia

Blur (px)

0px

Hue rotate (deg)

0°

Invert

Opacity

CSS Output

filter: none;

backdrop-filter (glassmorphism)

backdrop-filter: none;

What is the CSS filter property?

The CSS filter property applies graphical effects to any HTML element — images, divs, videos, SVGs, or entire sections. It supports nine functions: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity(), and saturate(). Multiple filters are chained space-separated: filter: brightness(1.2) contrast(1.1) grayscale(0.3) — order matters, as they are applied left to right. The property is GPU-accelerated in all modern browsers. Note: filter creates a new stacking context, which can affect z-index behavior of child elements. For frosted-glass overlays use the related backdrop-filter property instead.

Frequently Asked Questions

The CSS filter property applies visual effects to elements. It supports: blur (Gaussian blur), brightness (luminosity adjustment), contrast, grayscale (converts to grey), sepia (warm brownish tint), hue-rotate (shifts colors on the color wheel), invert, opacity, and saturate. Multiple functions can be combined space-separated.

Yes. CSS filter works on any HTML element, not just images. You can apply filters to divs, videos, SVGs, text, and entire page sections. Note: filter creates a stacking context, which can affect z-index behavior of child elements.

List multiple filter functions space-separated: filter: brightness(1.2) contrast(1.1) blur(2px). The order matters — filters are applied left to right, so brightness(2) grayscale(1) differs from grayscale(1) brightness(2).

hue-rotate(Ndeg) shifts all colors in an element around the color wheel by N degrees. 0deg = no change, 90deg shifts red toward yellow, 180deg inverts hues, 360deg = full rotation (back to original). Useful for color theming without changing images.

CSS filter provides a simplified set of common effects with a clean syntax. SVG filter (referenced via filter: url(#svgFilter)) offers much more power — arbitrary compositing operations, displacement maps, turbulence, and custom kernels. CSS filter is simpler; SVG filter is more powerful.

CSS filter triggers GPU compositing for the affected element. Most filter effects are well-optimized. blur() is the most expensive — large blur values on large elements can cause frame rate drops. Avoid animating blur values on large elements; prefer animating opacity or transform instead.

Combine sepia and contrast: filter: sepia(0.5) contrast(1.2) brightness(1.05). For a faded look: filter: brightness(1.1) contrast(0.9) saturate(0.7). For black & white: filter: grayscale(1) contrast(1.1). Experiment with small increments of each function for natural-looking results.

What is the CSS filter property?

Frequently Asked Questions

Explore Our Network