Home HTML CSS JavaScript jQuery ReactJS NodeJS About us Blogs Faqs

CSS filter Property

The filter property is used to customize an element's visual appearance. This property is commonly used in image content to modify the image rendering, background, border, and so on.

Syntax

Example

Preview

Property Values

Value Description
none The default value. No effects are specified.
blur(px) The image is blurred as a result of the blur effect. A higher value will result in more blur. If no value is specified, the value 0 is used.
brightness(%) Adjusts the image's brightness.
contrast(%) The image will be completely black if the percentage is set to 0%. The original image is represented by 100 percent (1) by default. Values greater than 100% will produce better results.
drop-shadow(h-shadow v-shadow blur spread color)

The image is given a drop shadow effect.

  • H-Shadow - Required. A pixel value for the horizontal shadow is specified. When negative values are used, the shadow is shifted to the left side of the image.
  • V-Shadow - This is required. A pixel value for the vertical shadow is specified. When the value is negative, the shadow is placed above the image.
  • Blur - This is optional. This is the third value, and it must be expressed in pixels. The shadow is blurred as a result of this setting. A higher value will result in more blur (the shadow becomes bigger and lighter). Negative values are not permitted. If no value is specified, the default value is 0 (the shadow's edge is sharp).
  • Spread - This is optional. This is the fourth value, and it must be expressed in pixels. Positive values cause the shadow to expand and grow larger, while negative values cause the shadow to contract. It will be 0 if not specified (the shadow will be the same size as the element).Note that Chrome, Safari, Opera, and possibly other browsers do not support this 4th length; if it is added, it will not render.
  • Color - This is optional. Changes the color  of the shadow. If no color  is specified, the color  is determined by the browser (often black).
  • An example of a red shadow that is 8px wide both horizontally and vertically, with a 10px blur effect:drop-shadow (8px 8px 10px red);
  • This filter is comparable to the box-shadow property.
grayscale(%) The image is converted to grayscale. The default value is 0 percent (0), which represents the original image. The image will become completely grey if the percentage is set to 100%. (used for black and white images). Negative values are not permitted.
hue-rotate(deg) On the image, a hue rotation is applied. The value specifies the number of degrees the image samples will be adjusted around the color  circle. The original image is represented by 0deg, which is the default. Please keep in mind that the maximum value is 360 degrees.
invert(%) The samples in the image are inverted. The default value is 0 percent (0), which represents the original image. The image will be completely inverted if the percentage is set to 100%. Negative values are not permitted.
opacity(%) Sets the image's opacity level. The transparency-level is described by the opacity-level, where 0 percent is completely transparent. 100% (1) is the default and represents the original image. Negative values are not permitted. Tip: The opacity property is similar to this filter.
saturate(%) The image is saturated. Using 0 % (0) will result in an image that is completely desaturated. The default setting is 100%, which represents the original image. Values greater than 100% produce super-saturated results. Negative values are not permitted.
sepia(%) The image is converted to sepia. The default value is 0 percent (0), which represents the original image. The image will be completely sepia if you set the percentage to 100%. Negative values are not permitted.
url() The url() function accepts the location of an XML file containing an SVG filter specification, which may include an anchor to a specific filter element. url as an example.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Element Chrome Firefox Safari Edge / IE Opera
filter 53.0 
18.0 -webkit- 		35.0 9.1 
6.0 -webkit- 		13.0 40.0 
15.0 -webkit-