CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise


CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

CSS filter Property

CSS filter Property



The filter property is used to specify visual effects to an element like an image or video.


Default Value:-


The default value is none.




Its syntax is:- filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();


Further Explanation:-


Filter Description
none Specifies no effects
blur(px) Applies a blur effect to the image.
brightness(%) Adjusts the brightness of the image.
contrast(%) Adjusts the contrast of the image.
drop-shadow(h-shadow v-shadow blur spread color) Applies a drop shadow effect to the image. 
grayscale(%) Converts the image to grayscale.
hue-rotate(deg) Applies a hue rotation on the image.
invert(%) Inverts the samples in the image.
opacity(%) Sets the opacity level for the image.
saturate(%) Saturates the image.
sepia(%) Converts the image to sepia..
url() The url() function takes the location of an XML file that specifies an SVG filter.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Code Explanation

All Tutorials related to CSS Properties

All Sections related to CSS