CSS Filters

Part of the CSS Mastery section of Coddy's HTML journey — lesson 22 of 43.

Filters let you visually change images, backgrounds, and even text using fun effects. It's like putting on sunglasses, turning on a spotlight, or stepping into black-and-white mode — all with one line of CSS.

1. Blur (px) – Makes the element look soft and out of focus.

img {
  filter: blur(5px);
}
//slightly out of focus

2. Brightness(%) – Controls how light or dark something appears.

img {
  filter: brightness(150%);
}
//brightens like turning on a spotlight.

3. Grayscale(%) – Converts color to black and white.

img {
  filter: grayscale(100%);
}
//classic vintage or newspaper effect.

4. Sepia(%) – Adds a warm, brownish tone for a retro photo vibe.

img {
  filter: sepia(70%);
}
//like an old photo album.

There are many more filters you can experiment with! Feel free to explore them and see what creative effects you can create.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

You have four images in a gallery. Your challenge is to apply the following filters to each image:

First Image (Blur): Apply a blur(3px) filter to make the image soft and out of focus.
Second Image (Brightness): Use brightness(2.0) to make the image brighter.
Third Image (Grayscale): Apply grayscale(100%) to turn the image black and white.
Fourth Image (Sepia): Use sepia(70%) to give the image a warm, vintage tone.

Cheat sheet

CSS filters let you visually change images, backgrounds, and text using effects.

Blur (px) – Makes elements soft and out of focus:

img {
  filter: blur(5px);
}

Brightness(%) – Controls how light or dark something appears:

img {
  filter: brightness(150%);
}

Grayscale(%) – Converts color to black and white:

img {
  filter: grayscale(100%);
}

Sepia(%) – Adds a warm, brownish tone for a retro photo effect:

img {
  filter: sepia(70%);
}

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.