CSS Filter Generator
Build CSS filters visually and copy the code.
Start with a preset
Or fine-tune every value below.
Preview
none
Generated code
Copy and paste directly into your project.
CSS
Advertisement
Banner adResponsive
CSS Filter Generator – Blur, Grayscale, Sepia & More
Build CSS filters visually: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow. Copy CSS, Tailwind or React.
Related tools
What is CSS Filter Generator?
Adjust all ten CSS filter functions with sliders and see the result on a sample image or on your own photo. Only the functions you change are written out, always in the same order, so the code is short and predictable. Start from a preset such as grayscale, sepia or vintage, then copy the filter as CSS, a Tailwind class or a React style object. Your image never leaves your browser.
- css filter
- blur
- grayscale
- sepia
- hue-rotate
- drop-shadow
- image effects
Features
What you get with CSS Filter Generator.
All Ten Filter Functions
Blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow.
Preview Your Own Image
Drop in a photo to see the filter on real content. It stays in your browser.
Clean Output
Only changed functions are written, in a fixed and correct order.
CSS, Tailwind & React
Copy the result in the format your project uses.
How to use CSS Filter Generator
Follow these steps to get the best results.
Pick a starting point
Choose a preset such as Grayscale or Vintage, or start from the original image.
Adjust the sliders
Fine-tune brightness, colour, blur and more. Use Compare to flip back to the original, or drop in your own image to test on real content.
Copy the code
Pick CSS, Tailwind or React and paste it into your project.
Outputfilter: sepia(40%) contrast(110%) brightness(90%);
Advertisement
In-feed adResponsive
Frequently asked questions
Common questions about CSS Filter Generator.
Yes. Each function filters the result of the one before it, so blur(4px) grayscale(1) and grayscale(1) blur(4px) can look different. This tool always writes them in the same order and puts drop-shadow last so the shadow keeps its colour.
filter changes the element itself and everything inside it. backdrop-filter changes only what is visible behind the element, which is how frosted-glass effects work. They accept the same functions, so you can reuse the value from this tool in either property.
box-shadow follows the rectangular box of the element. drop-shadow follows the visible shape, so a transparent PNG or SVG gets a shadow around its outline instead of its box.
Most are cheap, but a large blur on a big or animating element can be costly because the browser has to redraw it. Keep blur radii modest on large areas and avoid animating filters on many elements at once.
Yes. The Tailwind output is an arbitrary property such as [filter:grayscale(100%)], which produces exactly the same CSS and also supports opacity() and drop-shadow() with custom values.
Advertisement
Mobile banner adResponsive
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.