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 |