CSS Filter Generator

The CSS filter property applies visual effects processed by the device GPU, smooth, performant and without extra files.

The CSS `filter` property accepts a list of functions applied in cascade over the element and its descendants: `blur()` softens edges, `brightness()` and `contrast()` control exposure and drama, `grayscale()` removes saturation, `hue-rotate()` shifts hue while preserving luminosity and saturation, `sepia()` warms in historical brown tones, `invert()` flips the color map. `drop-shadow()` differs from `box-shadow`, it respects the actual content shape, including transparent PNGs. Filters are processed by the graphics compositor, making them efficient even in animations, especially when the element has `will-change: filter`.

Adjust each filter with sliders and see the result in real time.

1. Move the sliders to adjust each filter function. Sliders with non-default values are highlighted for easy reading.
2. Apply a preset as a starting point and fine-tune the values manually.
3. Copy the generated CSS and apply it to your stylesheet. Use `filter` on the target class or element.

Use this tool on your site

<iframe
  src="https://jkit.tools/embed/en-US/css-filter-generator"
  width="100%"
  height="600"
  style="border:0"
  loading="lazy"
  title="CSS Filter Generator"
></iframe>

Sources and references for this tool

These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.

• filterMDN Web Docs, Complete CSS filter functions reference with examples.
• CSS Filter Effects Module Level 1W3C, Official specification for CSS filter functions.

Frequently asked questions

Where to go next