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.

Updated
Runs in your browser. Your data is not uploaded.
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.

Is anything uploaded?

No. The sample image is part of the site, and the CSS is built in your browser.

Often used together with the CSS Filter Generator.