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