Flash cards
Review the key moves
What is the main idea behind CSS Image Filter Effects?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: blur(2px);Put the learning moves in the order that makes the concept easiest to apply.
CSS Filters
The CSS filter property is used to add visual effects (like blur and saturation) to elements.
Within the filter property, you can use the following CSS functions:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
The CSS blur() Function
The blur() filter function applies a blur effect to an element. A larger value will create more blur.
If no value is specified, 0 is used (no effect).
Example
#img1 {
filter: blur(2px);
}
#img2 {
filter: blur(6px);
}Live preview
The CSS brightness() Function
The brightness() filter function adjusts the brightness of an element.
- 100% is default, and represents the original brightness
- Values over 100% will provide brighter results
- Values under 100% will provide darker results
- 0% will make the image completely black
Example
#img1 {
filter: brightness(150%);
}
#img2 {
filter: brightness(50%);
}Live preview
The CSS contrast() Function
The contrast() filter function adjusts the contrast of an element.
- 100% is default, and represents the original contrast
- Values over 100% increases the contrast
- Values under 100% decreases the contrast
- 0% will make the image completely gray
Example
#img1 {
filter: contrast(150%);
}
#img2 {
filter: contrast(50%);
}Live preview
The CSS drop-shadow() Function
The drop-shadow() filter function applies a drop-shadow effect to an image.
Example
#img1 {
filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
filter: drop-shadow(10px 10px 7px lightblue);
}Live preview
The CSS grayscale() Function
The grayscale() filter function converts an image to grayscale.
- 100% (or 1) will make the image completely grayscale
- 0% (or 0) will have no effect
Example
#img1 {
filter: grayscale(1);
}
#img2 {
filter: grayscale(60%);
}
#img3 {
filter: grayscale(0.4);
}Live preview
The CSS hue-rotate() Function
The hue-rotate() filter function applies a color rotation to an element.
This function applies a hue rotation on the image. The value defines the number of degrees around the color circle the image will be adjusted. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. 0deg represents the original image.
Example
#img1 {
filter: hue-rotate(200deg);
}
#img2 {
filter: hue-rotate(90deg);
}
#img3 {
filter: hue-rotate(-90deg);
}Live preview
The CSS invert() Function
The invert() filter function inverts the color of an image.
- 100% (or 1) will fully invert the colors
- 0% (or 0) will have no effect
Example
#img1 {
filter: invert(0.3);
}
#img2 {
filter: invert(70%);
}
#img3 {
filter: invert(100%);
}Live preview
The CSS opacity() Function
The opacity() filter function applies an opacity effect to an element.
- 100% (or 1) will have no effect
- 50% (or 0.5) will make the element 50% transparent
- 0% (or 0) will make the element completely transparent
Example
#img1 {
filter: opacity(80%);
}
#img2 {
filter: opacity(50%);
}
#img3 {
filter: opacity(0.2);
}Live preview
The CSS saturate() Function
The saturate() filter function adjusts the saturation (color intensity) of an element.
- 100% (or 1) will have no effect
- 0% (or 0) will make the element completely unsaturated
- 200% (or 2) will make the element super saturated
Example
#img1 {
filter: saturate(0);
}
#img2 {
filter: saturate(100%);
}
#img3 {
filter: saturate(200%);
}Live preview
The CSS sepia() Function
The sepia() filter function converts an image to a sepia tone (a warmer, more brown/yellow color).
- 0% (or 0) will have no effect
- 100% (or 1) applies full sepia effect
Example
#img1 {
filter: sepia(1);
}
#img2 {
filter: sepia(60%);
}
#img3 {
filter: sepia(0.4);
}Live preview
CSS Filter Functions
The following table lists the CSS filter functions:
| Function | Description |
|---|---|
| blur() | Applies a blur effect to an element |
| brightness() | Adjusts the brightness of an element |
| contrast() | Adjusts the contrast of an element |
| drop-shadow() | Applies a drop-shadow effect to an image |
| grayscale() | Converts an image to grayscale |
| hue-rotate() | Applies a color rotation to an element |
| invert() | Inverts the color of an image |
| opacity() | Applies an opacity effect to an element |
| saturate() | Adjusts the saturation (color intensity) of an element |
| sepia() | Converts an image to sepia |