CSS filter properties allow you to apply visual effects like blur, brightness, contrast, and grayscale to elements, especially images.
1. Applying a Basic Filter
The filter property is used to apply various graphical effects. Here’s how you use it:
img {
filter: blur(5px);
}
2. Common CSS Filters
| Filter | Description | Example |
|---|---|---|
blur(px) |
Blurs the element |
filter: blur(5px); |
brightness(%) |
Adjusts brightness (100% is normal) |
filter: brightness(150%); |
contrast(%) |
Adjusts contrast (100% is normal) |
filter: contrast(200%); |
grayscale(%) |
Converts image to grayscale (0-100%) |
filter: grayscale(100%); |
invert(%) |
Inverts colors (0-100%) |
filter: invert(100%); |
sepia(%) |
Applies sepia tone (0-100%) |
filter: sepia(80%); |
saturate(%) |
Adjusts saturation (100% is normal) |
filter: saturate(300%); |
hue-rotate(deg) |
Changes hue (0-360 degrees) |
filter: hue-rotate(180deg); |
drop-shadow() |
Adds a shadow effect |
filter: drop-shadow(5px 5px 10px gray); |
3. Applying Multiple Filters
You can combine multiple filter effects for unique styles.
img {
filter: grayscale(50%) brightness(120%) contrast(90%);
}
4. CSS Filter Effects on Backgrounds
Filters can also be applied to backgrounds using backdrop-filter.
.blur-bg {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
combine-multiple-filter
5. CSS Filter Hover Effects
Use filters to create interactive hover effects.
img {
filter: grayscale(100%);
transition: filter 0.3s ease-in-out;
}
img:hover {
filter: grayscale(0%);
}
Conclusion
CSS filters offer powerful ways to enhance visual design. You can adjust brightness, contrast, blur, and even apply multiple effects for creative designs.