CSS Filters

CSS Filters are used to modify the appearance of images, backgrounds, and HTML elements. They are commonly used in photo galleries, cards, hover effects, and modern web interfaces.

Why Use CSS Filters?

• Improve image appearance.
• Create modern hover effects.
• Apply visual effects without image editing software.
• Enhance user experience.
• Create attractive UI designs.

img{

    filter:grayscale(100%);

}

The filter property applies one or more graphical effects to an element.

img{

    filter:blur(4px);

}

The blur() function makes an image appear blurry. The higher the pixel value, the stronger the blur.

img{

    filter:blur(5px);

}

.banner{

    filter:blur(3px);

}

The brightness() function increases or decreases the brightness of an image.

img{

    filter:brightness(150%);

}

.photo:hover{

    filter:brightness(120%);

}

The contrast() function adjusts the difference between the light and dark areas of an image.

img{

    filter:contrast(200%);

}

.gallery img:hover{

    filter:contrast(130%);

}

The grayscale() function converts a colored image into shades of gray. It is commonly used for image galleries and hover effects.

img{

    filter:grayscale(100%);

}

.gallery img:hover{

    filter:grayscale(0%);

}

CSS provides several additional filter functions for creating unique visual effects.

img{

    filter:sepia(100%);

}

img{

    filter:invert(100%);

}

img{

    filter:opacity(50%);

}

img{

    filter:saturate(200%);

}

img{

    filter:hue-rotate(90deg);

}

Example 1 : Blur Image

img{

    filter:blur(4px);

}

Example 2 : Black & White Image

img{

    filter:grayscale(100%);

}

Example 3 : Bright Hover Effect

img:hover{

    filter:brightness(120%);

}

Example 4 : Vintage Image

img{

    filter:sepia(80%);

}

• Create beautiful visual effects.
• Improve user interaction.
• Work without image editing software.
• Easy to combine with transitions.
• Perfect for hover effects.
• Improve modern website design.
• Easy to implement using CSS.

img:hover{

    filter:

    brightness(120%)

    contrast(110%)

    saturate(150%);

}

Following best practices helps create attractive visual effects while maintaining good performance and usability.

• Use filter effects only where necessary.
• Combine filters with CSS transitions for smooth hover effects.
• Avoid applying heavy blur on large images.
• Maintain readability when using brightness or contrast filters.
• Optimize images before applying filters.
• Test filter effects on different devices.
• Use subtle effects for professional designs.
• Combine multiple filters carefully.

❌ Poor

filter:

blur(15px)

brightness(300%);

✔ Better

filter:

blur(2px)

brightness(110%);

The CSS filter property is supported in all modern web browsers.

1. What is the purpose of the filter property?
2. What does the blur() function do?
3. How does brightness() differ from contrast()?
4. What is the use of the grayscale() function?
5. What does the sepia() function do?
6. How does invert() work?
7. Can multiple filter functions be used together?
8. What is the purpose of hue-rotate()?
9. How can CSS Filters improve user experience?
10. Are CSS Filters supported by modern browsers?

In this lesson, you learned:

• ✔ Introduction to CSS Filters.
• ✔ The filter property.
• ✔ blur() Function.
• ✔ brightness() Function.
• ✔ contrast() Function.
• ✔ grayscale() Function.
• ✔ Other filter functions such as sepia(), invert(), opacity(), saturate(), and hue-rotate().
• ✔ Practical examples.
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.