CSS Filter Property
Syntax
- filter: none (default value)
- filter: initial (defaults to none);
- filter: inherit (defaults to parent value);
- filter: blur(px)
- filter: brightness(number | %)
- filter: contrast(number | %)
- filter: drop-shadow(horizontal-shadow-px vertical-shadow-px shadow-blur-px shadow- - spread color)
- filter: greyscale(number | %)
- filter: hue-rotate(deg)
- filter: invert(number | %)
- filter: opacity(number | %)
- filter: saturate(number | %)
- filter: sepia(number | %)
Parameters
| Value | Description |
|---|---|
| blur(x) | Blurs the image by x pixels. |
| brightness(x) | Brightens the image at any value above 1.0 or 100%. Below that, the image will be darkened. |
| contrast(x) | Provides more contrast to the image at any value above 1.0 or 100%. Below that, the image will get less saturated. |
| drop-shadow(h, v, x, y, z) | Gives the image a drop-shadow. h and v can have negative values. x, y, and z are optional. |
| greyscale(x) | Shows the image in greyscale, with a maximum value of 1.0 or 100%. |
| hue-rotate(x) | Applies a hue-rotation to the image. |
| invert(x) | Inverts the color of the image with a maximum value of 1.0 or 100%. |
| opacity(x) | Sets how opaque/transparent the image is with a maximum value of 1.0 or 100%. |
| saturate(x) | Saturates the image at any value above 1.0 or 100%. Below that, the image will start to de-saturate. |
| sepia(x) | Converts the image to sepia with a maximum value of 1.0 or 100%. |
Remarks
-
Since filter is an experimental feature, you should use the -webkit prefix. It may change in syntax and behavior, but the changes are probably going to be small.
-
It might not be supported in older versions of major browsers. It might be entirely unsupported in mobile browsers.
-
Due to its relatively limited support, try to use
box-shadowinstead offilter: drop-shadow(). Useopacityinstead offilter: opacity(). -
It can be animated through Javascript/jQuery. For Javascript, use
object.style.WebkitFilter. -
W3Schools also has a demo page for all the different type of filter values.
