↑↓ to move · Enter to open · Esc to close

CSS Filter Generator

Adjust blur, brightness, contrast, grayscale, hue, sepia, and more on a sample photo, add a drop shadow, and copy the CSS filter line.

Runs in your browser. Your data is not uploaded.
Built by · Updated
Preview
CSS

How to use the CSS Filter Generator

  1. Move the sliders for blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia, or start from a preset.
  2. Tick drop-shadow to add a shadow that follows the image's shape.
  3. Press Copy CSS and apply the class to your image.

How it works

  • filter applies functions in the order written, left to right. Order changes the result: grayscale() then sepia() differs from the reverse.
  • Neutral values are 0 for blur, grayscale, hue-rotate, invert, and sepia, and 100% for brightness, contrast, opacity, and saturate. Neutral functions are left out of the output.
  • drop-shadow() follows transparent pixels, unlike box-shadow, which follows the rectangle.

Examples

  • Vintage preset: filter: brightness(105%) contrast(110%) saturate(80%) sepia(60%);
  • Black and white: filter: contrast(120%) grayscale(100%);
  • A dimmed hero image under text: filter: brightness(60%);

Limitations

  • Filters are applied by the browser on every paint. Large blurs on big images can be slow on phones.
  • For a filtered image that never changes, editing the image file itself saves work for every visitor.
  • url() SVG filters are not covered.

Frequently asked questions

Can I combine several CSS filters?

Yes. Write them in one filter property separated by spaces. They are applied in order.

What is the difference between drop-shadow and box-shadow?

box-shadow is drawn around the element's rectangle. drop-shadow() follows the visible pixels, so it fits PNG logos and icons.

Can I use filters on things other than images?

Yes. Filters work on any element: text, videos, iframes, or whole sections.

Often used together with CSS Filter Generator.