CSS Filter Generator
Move the sliders for blur, brightness, contrast, grayscale, hue rotation, sepia and more, and watch the sample shapes and the generated filter declaration update instantly. Start from a preset such as vintage or noir, then copy the CSS. For shadows on boxes, try the CSS Box-Shadow Generator.
🔒 Runs in your browser · Your data is never sent to a server
Presets
Preview
Filters
drop-shadow
Notes
- Functions at their neutral value (such as brightness 100%) are left out, and when everything is neutral the output is `filter: none;`.
- Filters are applied left to right, so order can change the look. This tool uses a fixed order.
- The preview uses sample shapes drawn with CSS only. Real images and elements may look different.
- Large blur values or many filtered elements can slow down rendering.
- The color picker accepts 6-digit hex only (no alpha).
Glossary
filter
The CSS property that applies visual effects such as blur or color adjustments. Chain functions with spaces, e.g. `filter: blur(4px) grayscale(50%);`.
drop-shadow
A filter function that casts a shadow following the visible outline, respecting transparent areas. Unlike box-shadow, it follows the shape of a transparent PNG or a shape.
hue-rotate
A filter function that rotates colors around the hue wheel by the given angle, from 0 to 360 degrees.
FAQ
How is filter: drop-shadow() different from box-shadow?
box-shadow follows the rectangular box of an element, while drop-shadow follows its visible outline and ignores transparent areas. Use drop-shadow when you want a shadow that hugs a transparent PNG or a round shape.
Does the order of multiple filters matter?
Yes. Filters are applied left to right, so chaining grayscale then sepia can look different from the reverse. This tool keeps a fixed order and outputs only the functions you changed.
Can blur and other filters slow down the page?
Large blur values, or filters on many elements or big images, can be expensive to render, especially if you animate them. Apply them only where needed.
What is the difference between filter and backdrop-filter?
filter affects the element itself and its children. backdrop-filter affects whatever is behind the element and is used for frosted-glass looks. The latter is covered by the CSS Glassmorphism Generator.
Share this page