CSS Effects

CSS Filters

The CSS Filter property is used to apply visual effects to elements, especially images.

Filters allow you to modify how an element appears without editing the original image.

Common uses include:

Blurring images
Adjusting brightness
Changing contrast
Creating grayscale effects
Applying shadows
Adding artistic visual effects

CSS filters are widely used in modern web design to enhance images and improve user interfaces.

Syntax

Filter Syntax

css

selector {
    filter: function(value);
}

Filter Example

css

img {
    filter: grayscale(100%);
}

Converts the image to black and white.

Attributes

Function	Description	Example
blur()	Blurs an element	blur(5px)
brightness()	Adjusts brightness	brightness(150%)
contrast()	Adjusts contrast	contrast(200%)
grayscale()	Converts to grayscale	grayscale(100%)
sepia()	Applies sepia effect	sepia(100%)
drop-shadow()	Adds shadow effect	drop-shadow(5px 5px 10px gray)

Example

CSS Filters Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Filters Example</title>
    <style>
        .blur {
            filter: blur(3px);
        }
        .grayscale {
            filter: grayscale(100%);
        }
        .brightness {
            filter: brightness(150%);
        }
        .shadow {
            filter: drop-shadow(5px 5px 10px gray);
        }
        img {
            width: 250px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Blur Example" class="blur">
    <img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Grayscale Example" class="grayscale">
    <img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Brightness Example" class="brightness">
    <img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Shadow Example" class="shadow">
</body>
</html>

Output

Browser Output

css

The first image will appear blurred
The second image will appear in black and white
The third image will appear brighter
The fourth image will display a shadow effect
Each filter changes the visual appearance while keeping the original image unchanged

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	No

Notes

Multiple filters can be combined.

Multiple Filters Example

css

filter:
    grayscale(100%)
    blur(2px);

Creates a blurred black-and-white image.

Common Filter Functions

Function	Effect
blur()	Softens image
brightness()	Lightens or darkens
contrast()	Increases contrast
grayscale()	Removes color
sepia()	Vintage effect
drop-shadow()	Adds shadow

Hover Effect Example

css

img:hover {
    filter: grayscale(0%);
}

Restores the original image color when hovered.

Conclusion

CSS Filters provide an easy way to apply visual effects to images and elements directly through CSS. Whether you need blur effects, grayscale images, brightness adjustments, or shadows, filters offer powerful styling options without modifying the original media files.

PreviousCSS Gradients NextCSS Opacity