Filter Generator
Drag the sliders to build an image look, then copy only the filters you changed as Tailwind classes or one CSS filter line.
(no filters applied)
filter: none;
Frequently asked questions
How do I apply multiple filters in Tailwind CSS?
Add several filter classes to the same element, such as blur-sm brightness-110 grayscale. Tailwind combines them into one filter declaration, so the order you write them in does not change the result.
What are the Tailwind blur sizes?
In v4: blur-xs is 4px, blur-sm 8px, blur-md 12px, blur-lg 16px, blur-xl 24px, blur-2xl 40px and blur-3xl 64px. Other values work with an arbitrary class like blur-[2px], which this tool outputs automatically.
What is the difference between filter and backdrop-filter?
filter changes the element itself and everything inside it. backdrop-filter only changes what is behind the element, which is how frosted glass works. Tailwind has matching backdrop-* classes for each filter.
Do CSS filters hurt performance?
Light filters are cheap. Large blur radii on big or animated elements can be expensive, especially on mobile, so keep blur small and avoid animating it on large areas.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.