Image Filters in CSS
? Image Filters in CSS
CSS Filters allow you to apply visual effects like blur, brightness, contrast, and more directly to images (or any HTML element).
Common CSS Filter Functions
| Filter | Description | Example Value |
|---|---|---|
blur() | Applies a blur effect | blur(5px) |
brightness() | Adjusts brightness (0 to any number, 1 = normal) | brightness(0.5) |
contrast() | Adjusts contrast (0 to any number, 1 = normal) | contrast(150%) |
grayscale() | Converts to grayscale (0 to 1) | grayscale(100%) |
hue-rotate() | Rotates the hue (degrees) | hue-rotate(90deg) |
invert() | Inverts colors (0 to 1) | invert(100%) |
opacity() | Sets transparency (0 to 1) | opacity(0.5) |
saturate() | Adjusts color saturation (0 to any number) | saturate(2) |
sepia() | Applies sepia tone (0 to 1) | sepia(100%) |
Syntax
img { filter: blur(3px) brightness(120%) contrast(90%);}Multiple filters can be combined by listing them separated by spaces.
Example: Applying Filters to an Image
<img src="photo.jpg" alt="Filtered Photo" class="filtered-img">.filtered-img { filter: grayscale(100%) brightness(80%) contrast(120%); transition: filter 0.3s ease;}.filtered-img:hover { filter: none; /* Remove filters on hover */}Practical Uses
Create hover effects.
Add artistic visual effects without editing the original image.
Improve accessibility by adjusting contrast or brightness.
Grayscale thumbnails that colorize on hover.
Browser Support
CSS filters are well supported in all modern browsers.
Want me to generate a demo with interactive image filters or explain how to animate filters?
