CSS Filter Generator

Understanding the Generated CSS

The output sets the filter property on an .element class. Replace .element with your own selector and apply the declaration to any HTML element — images, divs, canvases, videos, or pseudo-elements. Filter values are evaluated in order, so blur(2px) brightness(120%) first blurs and then brightens, which may produce a slightly different result than applying the functions in reverse.

Example: Grayscale Logos That Color on Hover

Set Grayscale to 100 and Contrast to 110. The tool writes:

.element {
  filter: contrast(110%) grayscale(100%);
}

Use it as the resting state of a logo strip and add .element:hover { filter: none; } with transition: filter 0.3s. The transition is smooth because one side is none.

Example: Reusing Light Screenshots in Dark Mode

Set Invert to 100 and Hue Rotate to 180:

.element {
  filter: hue-rotate(180deg) invert(100%);
}

White backgrounds turn black and the 180° rotation brings hues back near their original color: drawn in Chrome with this filter, #1a73e8 became rgb(72, 161, 255), a lighter blue, instead of the orange that invert alone gives. Apply it inside @media (prefers-color-scheme: dark) to diagrams and screenshots only; photos look wrong inverted.

Function Order and Limits

• Fixed order. The output always lists functions in the slider order (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia), and the preview uses the same string. Order matters once a channel clips: on a #999999 fill, brightness(200%) contrast(50%) gives rgb(191, 191, 191), while contrast(50%) brightness(200%) gives white. Reorder the functions by hand if you need a different sequence.
• Ranges: blur 0–20px in 0.1px steps, brightness, contrast and saturate 0–200%, hue-rotate 0–360deg, the rest 0–100%. The spec accepts larger values (brightness, contrast and saturate have no upper limit); type them into the CSS yourself.
• Not included: drop-shadow() and url() references to SVG filters. For blurring what is behind a glass panel, the property is backdrop-filter, not filter: filter: blur() blurs the element itself, text included.
• Containing block. Any value other than none makes the element the containing block for absolutely and fixed-positioned descendants, unless the element is the document root (html) (Filter Effects Level 1).
• Preview images are limited to 5 MB (5,242,880 bytes) and stay in the page. A larger file, a file that is not an image, or one this browser cannot decode (an empty file, a text file renamed to .png, HEIC where the browser has no HEIC decoder) is not loaded: the status line gives the reason and the preview keeps the current image. A file counts as an image when the browser reports an image type or the name ends in a common image extension, so an image file without an extension is rejected. The slider values are saved in this browser so the tool reopens with your last settings.

The filter property works without a prefix in Chrome 53, Firefox 35 and Safari 9.1 and later (MDN browser compat data). For shadows around the element’s box, use the box shadow generator.

Example: Zero Brightness and Opacity

Set Brightness and Opacity to zero while leaving the other seven controls at their defaults. The generator preserves both zero values and writes brightness before opacity. Reset Opacity alone to 100 to remove opacity() from the rule; brightness(0%) stays.

.element {
  filter: brightness(0%) opacity(0%);
}