Easy Tutorial
❮ Event Screeny Met Document Createtextnode ❯

Style filter Property

Style Object

Example

Modify the image color to black and white (100% grayscale):

// Chrome, Safari, and Opera browsers
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
// Standard syntax (not supported by other major browsers)
document.getElementById("myImg").style.filter = "grayscale(100%)";

Definition and Usage

The filter property is used to define visual effects (usually artistic) on an element (typically an <img>).

Note: The flexGrow property does not work if the element is not a flexible item.


Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Property Chrome Firefox IE Safari Opera
filter 18.0 Webkit Not supported Not supported 6.0 Webkit 15.0 Webkit

Note: Chrome, Safari, and Opera use the WebkitFilter property instead.


Syntax

Return the filter property:

object.style.filter

Set the filter property:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filter Functions

Note: Filters usually use percentages (e.g., 75%), but can also be represented as decimals (e.g., 0.75).

Filter Description
none Default value, no effect.
blur(px) Applies a Gaussian blur to the image. The "radius" value sets the standard deviation of the Gaussian function or how many pixels on the screen blend together, so a larger value results in more blur; if not set, it defaults to 0; this parameter can be set as a CSS length value but does not accept percentage values.
brightness(%) Applies a linear multiplier to the image, making it appear brighter or darker. A value of 0% results in a completely black image. A value of 100% leaves the image unchanged. Other values are linear multipliers of the effect. Values greater than 100% are allowed, resulting in a brighter image. If not set, the default is 1.
contrast(%) Adjusts the contrast of the image. A value of 0% results in a completely black image. A value of 100% leaves the image unchanged. Values greater than 100% result in lower contrast. If not set, the default is 1.
drop-shadow(h-shadow v-shadow blur spread color) Applies a shadow effect to the image. The shadow is composited below the image, can have a blur radius, and can be offset with a mask drawn in a specific color. The function accepts <shadow> values (defined in CSS3 backgrounds), except for the "inset" keyword, which is not allowed. This function is similar to the existing box-shadow property; the difference is that some browsers provide hardware acceleration for better performance. The <shadow> parameters are as follows: <offset-x> <offset-y> (required) sets the shadow offset; <blur-radius> (optional) sets the blur radius; <spread-radius> (optional) sets the spread radius; <color> (optional) sets the shadow color.
grayscale(%) Converts the image to grayscale. The value defines the conversion ratio. A value of 100% results in a completely grayscale image, while a value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the default is 0.
hue-rotate(deg) Applies a hue rotation to the image. The "angle" value sets the degree in the color wheel by which the image colors are adjusted. A value of 0deg leaves the image unchanged. If not set, the default is 0deg. There is no maximum value; values greater than 360deg are equivalent to wrapping around the color wheel.
invert(%) Inverts the input image. The value defines the inversion ratio. A value of 100% completely inverts the image. A value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the default is 0.
opacity(%) Transforms the image's transparency. The value defines the conversion ratio. A value of 0% results in a completely transparent image, while a value of 100% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the default is 1. This function is similar to the existing opacity property, but some browsers provide hardware acceleration for better performance.
saturate(%) Transforms the image's saturation. The value defines the conversion ratio. A value of 0% results in a completely unsaturated image, while a value of 100% leaves the image unchanged. Other values are linear multipliers of the effect. Values greater than 100% are allowed, resulting in higher saturation. If not set, the default is 1.
sepia(%) Converts the image to sepia. The value defines the conversion ratio. A value of 100% results in a completely sepia image, while a value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the default is 0.
url() The URL function accepts an XML file that sets an SVG filter and can include an anchor to specify a specific filter element. For example: filter: url(svg-url#element-id).
initial Sets the property to its default value. See CSS initial keyword.
inherit Inherits the property from its parent element. See CSS inherit keyword.

Technical Details

| CSS Version | CSS3 | | --- | --- |


Related Articles

CSS Reference: filter Property


Style Object

❮ Event Screeny Met Document Createtextnode ❯