CSS filterCSS filters are used to set visual effects to text, images, and other aspects of a webpage. The CSS filter property allows us to access the effects such as color or blur, shifting on the rendering of an element before the element gets displayed. The syntax of CSS filter property is given below. Syntax Let's discuss the property values along with an example. brightness()As its name implies, it is used to set the brightness of an element. If the brightness is 0%, then it represents completely black, whereas 100% brightness represents the original one. It can also accept values above 100% that provide brighter results. We can understand it by using the following illustration. Example Test it Nowblur()It is used to apply the blur effect to the element. If the blur value is not specified, then the value 0 is used as a default value. The parameter in blur() property does not accept the percentage values. A larger value of it creates more blur. Example Test it Nowinvert()It is used to invert the samples in the input image. Its 100% value represents completely inverted, and 0% values leave the unchanged input. Negative values are not allowed in it. Example Test it Nowsaturate()It sets the saturation of an element. The 0% saturation represents the completely unsaturated element, whereas the 100% saturation represents the original one. The values greater than 100% are allowed that provides super-saturated results. We cannot use negative values with this property. Example Test it Nowdrop-shadow()It applies the drop-shadow effect to the input image. The values it accepts are h-shadow, v-shadow, blur, spread, and color. Example Test it Nowcontrast()It adjusts the contrast of the input. Its 0% value will create a completely black image, whereas the 100% values leave the unchanged input, i.e., represents the original one. Values greater than 100% are allowed that provides results with less contrast. Example Test it Nowopacity()It is used to apply transparency to the input image. Its 0% value indicates completely transparent, whereas the 100% value represents the original image, i.e., fully opaque. Let's understand it by an illustration. Example Test it Nowhue-rotate()It applies a hue-rotation on the input image. Its perimeter value defines the number of degrees around the color circle; the image will be adjusted. Its default value is 0 degree, which represents the original image. Its maximum value is 360 degrees. Let's understand it by an illustration. Example Test it Nowgrayscale()It converts the input image into black and white. 0% grayscale represents the original one, whereas 100% represents completely grayscale. It converts the object colors into 256 shades of gray. Example Test it Nowsepia()It is used to transform the image into a sepia image. 0% value represents the original image, whereas the 100% value indicates the completely sepia. Example Test it Now
Next TopicCSS Images
|