CSS Filter Generator
A visual tool for generating and previewing CSS filter properties.
Filter Settings
Adjust each filter property
Presets
Try predefined filter styles
Preview
See the generated filter effects on the default image
Original
Filtered
Filter Preview
Generated CSS
filter: none;CSS Filter Functions Explained
Visual Effects
- • blur(px): Blur effect
- • brightness(%): Brightness adjustment
- • contrast(%): Contrast adjustment
- • opacity(%): Opacity adjustment
Color Effects
- • grayscale(%): Grayscale effect
- • hue-rotate(deg): Hue rotation
- • invert(%): Color inversion
- • saturate(%): Saturation adjustment
- • sepia(%): Sepia effect
Usage Tips
- • Combine multiple filters separated by spaces
- • Apply to any HTML element, not just images
- • Use with CSS animations for dynamic effects
- • Use backdrop-filter to apply only to backgrounds