CSS Filter Generator
Advertisement
CSS Filter Functions Reference
The CSS filter property applies graphical effects directly on HTML elements using GPU rendering. Filters work on any element — images, videos, divs, text — without image editing software.
Available CSS Filter Functions
- blur(px): Gaussian blur — blur(4px) creates a subtle defocus effect
- brightness(%): 0% = black, 100% = original, 200% = double brightness
- contrast(%): 0% = grey, 100% = original, 200% = high contrast
- grayscale(%): 100% = full greyscale (great for disabled states)
- sepia(%): warm brownish vintage tone; 100% = full sepia
- hue-rotate(deg): shifts all colors around the color wheel
- invert(%): 100% = full color inversion (useful for dark mode images)
- saturate(%): 0% = desaturated, 200% = vivid
- drop-shadow(): like box-shadow but follows element shape
Can I combine multiple CSS filters?
Yes. Chain multiple filters in a single property: filter: brightness(1.2) contrast(1.1) saturate(1.3);. Filters apply left to right — the output of each becomes the input of the next. Add transition: filter 0.3s ease; to animate between filter states on hover.
What is the difference between filter and backdrop-filter?
filter: applies effects to the element itself and all its contents. backdrop-filter: applies effects only to the content behind the element (what shows through a semi-transparent background). Use filter for image effects and hover states. Use backdrop-filter for the glassmorphism frosted glass effect.