Filter property

Learn filter: blur, brightness, contrast functions.

What is the filter property?

In CSS, the filter property changes how an element looks through built-in functions. Blur, brightness, contrast — each effect lands in a single line.

The syntax is filter: blur(2px);: function name, parens, value. You can stack several functions with a space between them.

This property shines on images and drawings; the original file stays untouched, and the whole page picks up the change instantly.

blur() adds softness

The blur() function applies a gaussian blur to an element. The value is a radius in pixels; blur(0) does nothing, blur(4px) is soft, blur(12px) gives a clear foggy look.

Large values spill past the edges; leave some room around a blurred element. A darker background makes a light blur easier to read.

brightness and contrast

brightness() sets how bright an element is. brightness(1) is the default, brightness(0.5) is half dark, brightness(1.6) is clearly brighter. The function is also handy for pushing a featured image forward on the page.

contrast() controls the gap between dark and light tones. contrast(1.5) sharpens the colors; contrast(0.8) fades them. Pairing the two gives the image a cinematic feel.

Exercise Give the photo a two-function filter

Write a single filter declaration for the .photo selector. It should hold blur(3px) and brightness(1.1) side by side, separated by a space.

Show example solution

/* photo filter */
.photo {
  filter: blur(3px) brightness(1.1);
}

Test yourself

Give the photo a light blur

.photo {
  filter: ____;
}

Show answer

.photo {
  filter: blur(2px);
}

Which value makes the image brighter?
```
.photo {
  filter: brightness(0.4);
}
```
- brightness(0.4)
- brightness(1)
- brightness(1.8)
- brightness(0)
Show answer

brightness(1.8) — Correct. Values above 1 boost brightness; 1.8 gives a clearly brighter result.
Match each function to its effect

blur()

Softens the edges
brightness()

Adjusts brightness
contrast()

Sharpens the tone gap
filter

The carrier property

Next lesson: Grayscale and sepia

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies