CSS Filters

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%);
}

Try It Now

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);
}

Try It Now

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%);
}

Try It Now

Conclusion

CSS filters offer powerful ways to enhance visual design. You can adjust brightness, contrast, blur, and even apply multiple effects for creative designs.