CSS Image Filter Effects
The CSS filter property is used to add visual effects to elements.
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.
Example
Apply different blur effects to <img> elements:
#img1 {
filter:
blur(2px);
}
#img2 {
filter: blur(6px);
}
Try it Yourself »
The CSS brightness() Function
The brightness() filter function adjusts the
brightness of an element.
- Values over 100% will provide brighter results
- Values under 100% will provide darker results
- 0% will make the image completely black
- 100% is default, and represents the original image
Example
Make an image brighter and darker than the original:
#img1 {
filter: brightness(150%);
}
#img2 {
filter: brightness(50%);
}
Try it Yourself »
The CSS contrast() Function
The contrast() filter function adjusts the
contrast of an element.
- Values over 100% increases the contrast
- Values under 100% decreases the contrast
- 0% will make the image completely gray
- 100% is default, and represents the original image
Example
Increase and decrease the contrast for an image:
#img1 {
filter: contrast(150%);
}
#img2 {
filter:
contrast(50%);
}
Try it Yourself »
The CSS drop-shadow() Function
The drop-shadow() filter function applies
a drop-shadow effect to an image.
Example
Add different drop-shadow effects to an image:
#img1 {
filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
filter: drop-shadow(10px 10px 7px lightblue);
}
Try it Yourself »
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
Set various grayscale for an image:
#img1 {
filter: grayscale(1);
}
#img2 {
filter:
grayscale(60%);
}
#img3 {
filter: grayscale(0.4);
}
Try it Yourself »
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
Set various color rotations for an image:
#img1 {
filter: hue-rotate(200deg);
}
#img2 {
filter:
hue-rotate(90deg);
}
#img3 {
filter: hue-rotate(-90deg);
}
Try it Yourself »
The CSS invert() Function
The invert() filter function inverts the color of an image.
- 100% (or 1) will make the image completely inverted
- 0% (or 0) will have no effect
Example
Invert the colors of an image:
#img1 {
filter: invert(0.3);
}
#img2 {
filter:
invert(70%);
}
#img3 {
filter: invert(100%);
}
Try it Yourself »
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
Set various opacity for an image:
#img1 {
filter: opacity(80%);
}
#img2 {
filter:
opacity(50%);
}
#img3 {
filter: opacity(0.2);
}
Try it Yourself »
The CSS saturate() Function
The saturate() filter function adjusts the saturation (color intensity) of an element.
- 0% (or 0) will make the element completely unsaturated
- 100% (or 1) will have no effect
- 200% (or 2) will make the element super saturated
Example
Set various saturations for an image:
#img1 {
filter: saturate(0);
}
#img2 {
filter:
saturate(100%);
}
#img3 {
filter: saturate(200%);
}
Try it Yourself »
The CSS sepia() Function
The sepia() filter function converts an image to sepia (a warmer, more brown/yellow color).
- 100% (or 1) will make the image completely sepia
- 0% (or 0) will have no effect
Example
Set various sepia for an image:
#img1 {
filter: sepia(1);
}
#img2 {
filter: sepia(60%);
}
#img3 {
filter: sepia(0.4);
}
Try it Yourself »
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 |
