Summary - Image effects

Build an image effects gallery with filters and blend modes.

Two tools, one visual language

In this group you met two distinct tools. filter lets you apply visual effects — blur, brightness, grayscale, hue shift, shadow — to a single element.

mix-blend-mode tells an element how to blend with the layer beneath; multiply darkens, screen lightens. Now you will combine these effects into an image gallery.

Exercise A nostalgia filter for the gallery images

Write a filter declaration for the .gallery img selector. It should hold grayscale(0.5) and contrast(1.2) side by side, separated by a space.

Show example solution

/* gallery image filter */
.gallery img {
  filter: grayscale(0.5) contrast(1.2);
}

Exercise Lighten the badge with screen

Write a mix-blend-mode: screen declaration for the .badge selector. The badge should blend by lightening with the layer below.

Show example solution

/* badge blend */
.badge {
  mix-blend-mode: screen;
}

Test yourself

Match each effect to its job

blur()

Softens the edges
grayscale()

Desaturates
drop-shadow()

Traces the shape with shadow
multiply

Blends darker
screen

Blends brighter
Which gives a shape-following shadow to a transparent icon?
```
.icon {
  /* which? */
}
```
- filter: blur(2px)
- filter: brightness(1.5)
- filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4))
- mix-blend-mode: multiply
Show answer

filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)) — Correct. drop-shadow() skips the transparent areas and traces the real outline of the icon.

Next lesson: Subgrid

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies