Article Categories

Selected Reading

How to add visual effects to images with CSS?

CSS Web Development Front End Technology

The CSS filter property is used to apply visual effects to images such as blur, brightness, contrast, drop shadow, grayscale, and more. This property allows you to enhance or modify the appearance of images directly through CSS without needing image editing software.

Syntax

selector {
    filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}

Common Filter Effects

Filter Function	Description	Values
`blur()`	Applies blur effect	px values (e.g., 5px)
`brightness()`	Adjusts brightness	0% to 100%+ (100% = normal)
`contrast()`	Adjusts contrast	0% to 100%+ (100% = normal)
`grayscale()`	Converts to grayscale	0% to 100%
`invert()`	Inverts colors	0% to 100%
`sepia()`	Applies sepia tone	0% to 100%
`saturate()`	Adjusts saturation	0% to 100%+ (100% = normal)
`hue-rotate()`	Rotates hue	0deg to 360deg
`drop-shadow()`	Adds drop shadow	h-offset v-offset blur color

Example: Image with Invert Effect

The following example demonstrates how to invert image colors using the invert() filter −

<!DOCTYPE html>
<html>
<head>
<style>
    .image-container {
        display: flex;
        gap: 20px;
        margin: 20px;
    }
    
    .image-box {
        text-align: center;
    }
    
    img {
        width: 200px;
        height: 150px;
        border: 2px solid #ddd;
        border-radius: 8px;
    }
    
    .inverted {
        filter: invert(100%);
    }
</style>
</head>
<body>
    <div class="image-container">
        <div class="image-box">
            <h3>Original Image</h3>
            <img src="/css/images/css-mini-logo.jpg" alt="Original">
        </div>
        <div class="image-box">
            <h3>Inverted Image</h3>
            <img src="/css/images/css-mini-logo.jpg" alt="Inverted" class="inverted">
        </div>
    </div>
</body>
</html>

Two images are displayed side by side: the original image on the left and a color-inverted version on the right, where all colors are reversed (like a photographic negative).

Example: Multiple Filter Effects

You can combine multiple filter effects by chaining them together −

<!DOCTYPE html>
<html>
<head>
<style>
    .filter-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 20px;
    }
    
    .filter-item {
        text-align: center;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
    
    img {
        width: 150px;
        height: 120px;
        border-radius: 5px;
    }
    
    .blur { filter: blur(3px); }
    .brightness { filter: brightness(150%); }
    .sepia { filter: sepia(80%); }
    .grayscale { filter: grayscale(100%); }
    .hue-rotate { filter: hue-rotate(90deg); }
    .combined { filter: brightness(120%) contrast(130%) drop-shadow(5px 5px 10px #333); }
</style>
</head>
<body>
    <div class="filter-gallery">
        <div class="filter-item">
            <h4>Blur Effect</h4>
            <img src="/css/images/css-mini-logo.jpg" alt="Blurred" class="blur">
        </div>
        <div class="filter-item">
            <h4>Brightness</h4>
            <img src="/css/images/css-mini-logo.jpg" alt="Bright" class="brightness">
        </div>
        <div class="filter-item">
            <h4>Sepia Tone</h4>
            <img src="/css/images/css-mini-logo.jpg" alt="Sepia" class="sepia">
        </div>
        <div class="filter-item">
            <h4>Grayscale</h4>
            <img src="/css/images/css-mini-logo.jpg" alt="Gray" class="grayscale">
        </div>
        <div class="filter-item">
            <h4>Hue Rotation</h4>
            <img src="/css/images/css-mini-logo.jpg" alt="Hue" class="hue-rotate">
        </div>
        <div class="filter-item">
            <h4>Combined Effects</h4>
            <img src="/css/images/css-mini-logo.jpg" alt="Combined" class="combined">
        </div>
    </div>
</body>
</html>

A grid of six images is displayed, each showing a different filter effect: blurred image, brightened image, sepia-toned image, grayscale image, hue-rotated image with shifted colors, and a combined effect image that is brighter, higher contrast, and has a drop shadow.

Conclusion

The CSS filter property provides a powerful way to apply visual effects to images without external tools. You can use individual filters or combine multiple effects to create unique visual styles for your web content.

AmitDiwan

Updated on: 2026-03-15T14:25:32+05:30

538 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next