YouTip

[ Style Object](#) ## Example Change 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%)"; [Try it »](#) * * * ## Definition and Usage The filter property is used to define visual effects for an element (usually an ). **Note:** If the element is not a flex item, the flexGrow property does not work. * * * ## Browser Support The numbers in the table specify the first browser version that fully supports the property. | Property | | | | | | | --- | --- | --- | --- | --- | --- | | 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 Get 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 often use percentages (e.g., 75%), but decimals can also be used (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 are blended together on the screen. Larger values result in more blur. If no value is set, the default is 0. This parameter accepts CSS length values but not percentage values. | | brightness(_%_) | Applies a linear multiplication 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 correspond to the linear multiplier effect. Values greater than 100% are allowed and will make the image brighter than the original. If no value is 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% are allowed, resulting in lower contrast. If no value is set, the default is 1. | | drop-shadow(_h-shadow v-shadow blur spread color_) | Applies a drop shadow effect to the image. The shadow is composited below the image and can be blurred and drawn with a specific color. The function accepts a value (as defined in CSS3 backgrounds), except the "inset" keyword is not allowed. This function is similar to the existing box-shadow property; the difference is that, through filters, some browsers provide hardware acceleration for better performance. ` parameters are as follows:` ` (Required) These are two values that set the shadow offset. sets the horizontal distance. A negative value places the shadow to the left of the element. sets the vertical distance. A negative value places the shadow above the element. See for possible units. If both values are 0, the shadow is placed directly behind the element (with blur and/or spread effects if set). (Optional) This is the third value. Larger values result in more blur, making the shadow larger and lighter. Negative values are not allowed. If not set, the default is 0 (resulting in a sharp shadow edge). (Optional) This is the fourth value. Positive values cause the shadow to expand and grow, negative values cause it to shrink. If not set, the default is 0 (the shadow will be the same size as the element). Note: Webkit and some other browsers do not support the fourth length, and it will not be rendered if added. (Optional) See for possible keyword and notation values. If not set, the color value is browser-dependent. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), the value of the color property is applied. Additionally, if the color value is omitted, the shadow is transparent in Webkit. | | grayscale(_%_) | Converts the image to grayscale. The value defines the proportion of the conversion. A value of 100% results in a completely grayscale image, while a value of 0% leaves the image unchanged. Values between 0% and 100% act as a linear multiplier for the effect. If not set, the default value is 0. | | hue-rotate(_deg_) | Applies a hue rotation to the image. The "angle" value sets the number of degrees around the color circle the image will be adjusted. A value of 0deg leaves the image unchanged. If not set, the default value is 0deg. Although there is no maximum value, values greater than 360deg are equivalent to another full rotation. | | invert(_%_) | Inverts the input image. The value defines the proportion of the conversion. A value of 100% results in complete inversion. A value of 0% leaves the image unchanged. Values between 0% and 100% act as a linear multiplier for the effect. If not set, the default value is 0. | | opacity(_%_) | Converts the image's transparency. The value defines the proportion of the conversion. A value of 0% results in complete transparency, while a value of 100% leaves the image unchanged. Values between 0% and 100% act as a linear multiplier for the effect, equivalent to multiplying the image sample by the amount. If not set, the default value is 1. This function is similar to the existing opacity property; the difference is that, through filters, some browsers provide hardware acceleration for better performance. | | saturate(_%_) | Converts the image saturation. The value defines the proportion of the conversion. A value of 0% results in complete desaturation, while a value of 100% leaves the image unchanged. Other values act as a linear multiplier for the effect. Values greater than 100% are allowed, resulting in higher saturation. If not set, the default value is 1. | | sepia(_%_) | Converts the image to sepia. The value defines the proportion of the conversion. A value of 100% results in a completely sepia image, while a value of 0% leaves the image unchanged. Values between 0% and 100% act as a linear multiplier for the effect. If not set, the default value 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. Example: filter: url(svg-url#element-id) | | initial | Sets the property to its default value. See: (#) | | inherit | Inherits the property from its parent element. See: (#) | * * * ## Technical Details | CSS Version | CSS3 | | --- | * * * ## Related Articles CSS Reference: (#) * * Style Object](#)