CSS filter generator

What is a Css Filter Generator?

The CSS filter property applies graphical effects to an element and its content, including images, videos and entire sections, without editing the source files. This generator lets you combine filter functions with sliders, preview the effect live and copy the resulting declaration.

How to use it

  1. Adjust each filter, such as brightness, contrast or blur.
  2. Watch the preview update.
  3. Copy the filter declaration.

Available filter functions

  • blur(4px): Gaussian blur.
  • brightness(1.2): 1 is unchanged, above 1 brighter.
  • contrast(1.5): increases contrast.
  • grayscale(100%): removes colour.
  • sepia(60%): warm vintage tone.
  • saturate(2): more vivid colours.
  • hue-rotate(90deg): shifts all hues around the colour wheel.
  • invert(100%): negative image.
  • opacity(50%) and drop-shadow().

Example

filter: grayscale(100%) contrast(1.2) brightness(0.9); gives a moody black-and-white look. Add transition: filter 0.3s and remove the filter on :hover to reveal colour when users point at an image.

Tips

  • Order matters. Filters are applied left to right, so sepia() hue-rotate() differs from the reverse.
  • drop-shadow() follows the shape of transparent PNGs and SVGs, unlike box-shadow.
  • To blur what is behind an element, for frosted glass, use backdrop-filter instead.
  • Heavy blur on large or animated areas can be expensive on mobile devices.

Frequently Asked Questions

Does the order of CSS filters matter?

Yes. Filters are applied in sequence from left to right, so changing the order can change the result.

What is the difference between filter and backdrop-filter?

filter affects the element itself. backdrop-filter affects whatever is visible behind the element.

Why use drop-shadow instead of box-shadow?

drop-shadow follows the visible shape of transparent images and SVGs, while box-shadow always uses the rectangular box.

Do CSS filters change the original image file?

No. They are applied when rendering in the browser. The file itself is unchanged.

How do I make an image grayscale until hover?

Apply filter: grayscale(100%) to the image, set filter: none on the hover state, and add a transition on filter for a smooth fade.

You May Also Need