Filter Property
suggest changeSyntax
- 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-shadow
instead offilter: drop-shadow()
. Useopacity
instead offilter: opacity()
. - It can be animated through Javascript/jQuery. For Javascript, use
object.style.WebkitFilter
. - Check W3Schools or MDN for more info.
- W3Schools also has a demo page for all the different type of filter values.