Tip: Reset any control to its default with .
Filters are applied in the order they appear in the filter property.
.filtered-element {
filter: blur(6px) brightness(120%) contrast(130%) saturate(150%) hue-rotate(210deg) grayscale(20%) sepia(15%) opacity(90%) drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.35));
}Choose a preset
Start with a preset or reset all filters to defaults.
Adjust filters
Tweak each filter value to get the perfect effect.
Preview live
See changes instantly across different use cases.
Copy the code
Copy clean CSS or Tailwind classes for your project.
The CSS filter property applies graphical effects to any element — image, card, background, or even text — without reaching for image editors. This tool gives you a visual editor for every common filter function and a live preview against real-world use cases.
Filter functions apply in the order they appear. blur first then contrast looks different from contrast first then blur. The generator preserves a sensible default order; rearrange after copying if you need a specific composition.
Click the small next to any control to reset that filter to its default. Use Reset at the top of the CSS column to clear everything at once.
filter: drop-shadow(...) follows the alpha channel of the target — so PNGs with transparent backgrounds get a shadow tracing their actual shape, not the rectangular box. Use it for icons, mascots, and cut-out images.
Switch the use-case tile (Image / Avatar / Card / Background) to see the same filter applied to different surfaces. Some filters look great on photos but odd on solid card backgrounds — verify across the use cases that matter to you.
filter is a CSS property that applies graphical effects (blur, brightness, contrast, color shifts, drop-shadow, etc.) to an element. It accepts a space-separated list of filter functions and renders the result on the GPU when possible.
No. Filters paint on top of the element without changing its size or position. Drop-shadow casts beyond the element box (unlike box-shadow on transparent images, drop-shadow follows the alpha channel).
box-shadow draws around the rectangular border box. filter: drop-shadow follows the actual visible pixels — so PNGs with transparent backgrounds get a shadow tracing their shape, not the bounding box.
hue-rotate spins around the color wheel and only affects pixels with chroma (saturation > 0). Pure black, white, and neutral grays have no hue, so hue-rotate has no effect on them.
blur and drop-shadow are the heaviest filters because they sample neighboring pixels. Use will-change: filter sparingly, avoid animating heavy filters at 60fps on large surfaces, and prefer baked images for static use.