CSS

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

CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

CSS Filters GrayScale Sepia Saturate hue rotate invert in CSS

CSS Filters

 

 

The CSS filter property lets you apply graphical effects to an element. Some of the functions are:- 

 

grayscale filter:-

 

The grayscale function converts an image to grayscale0% grayscale is the original image, whereas 100% makes the image completely grayscale.

 

Syntax:-

 

Its syntax is:-

< style >

element{
filter: grayscale(%);
}

< /style >

 

Sepia filter:-

 

The sepia function converts an image to a sepia. The idea behind sepia filters is that they can make black-and-white photos look a bit more eye-catching than the basic grayscale version. 0% sepia is the original image, whereas 100% converts the image to sepia completely.

 

Syntax:-

 

Its syntax is:-

< style >

element{
filter: sepia(%);
}

< /style >

 

saturate filter:-

 

The saturate function controls the color saturation of an image. 0% creates a completely unsaturated image (grayscale), whereas 100% is the original image.

 

Syntax:-

 

Its syntax is:-

< style >

element{
filter: saturate
(%);
}

< /style >

 

hue-rotate filter:-

 

The hue-rotate function applies a hue rotation (based on the color circle) to an image. If the image contains red color, which is at 0 degrees on the color circle, rotating the hue by 240deg will make the red color blue.

 

Syntax:-

 

Its syntax is:-

< style >

element{
filter: hue-rotate(deg);
}

< /style >

 

invert filter:-

 

The invert function inverts the colors of an image to make dark areas bright and bright areas dark0%invert leaves the image unchanged, whereas 100% creates a completely inverted image that is similar to a photographic negative.

 

Syntax:-

 

Its syntax is:-

< style >

element{
filter: invert (%);
}

< /style >

 

Further Explanation:-

 

Filter Description
none Specifies no effects
grayscale(%) Converts the image to grayscale.
hue-rotate(deg) Applies a hue rotation on the image.
invert(%) Inverts the samples in the image.
saturate(%) Saturates the image.
sepia(%) Converts the image to sepia.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Code Explanation

All Tutorials related to CSS3

All Sections related to CSS