CSS filter

CSS 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

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

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter: brightness(130%); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2>brightness(130%)</h2>	
</body> 
  
</html>

Test it Now

blur()

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter: blur(2px); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2>blur(2px)</h2>	
</body> 
  
</html>

Test it Now

invert()

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter: invert(60); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2>invert(60)</h2>	
</body> 
  
</html>

Test it Now

saturate()

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter: saturate(40); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2>saturate(40)</h2>	
</body> 
  
</html>

Test it Now

drop-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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter:  drop-shadow(10px 20px 30px yellow); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2> drop-shadow(10px 20px 30px yellow);</h2>	
</body> 
  
</html>

Test it Now

contrast()

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter:  contrast(50%); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2> contrast(50%)</h2>	
</body> 
  
</html>

Test it Now

opacity()

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter: opacity(40%); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2> opacity(40%)</h2>	
</body> 
  
</html>

Test it Now

hue-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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter:  hue-rotate(240deg); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2> hue-rotate(240deg)</h2>	
</body> 
  
</html>

Test it Now

grayscale()

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter:   grayscale(80%); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2>  grayscale(80%)</h2>	
</body> 
  
</html>

Test it Now

sepia()

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

 <!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
	body{
	text-align:center;
	}
        #img1 { 
            filter:   sepia(90%); 
        } 
    </style> 
</head> 
<body> 
        <img src =  "tiger.png" > <h2>Original Image	</h2>
        <img src =  "tiger.png" id = "img1"> <h2>  sepia(90%)</h2>	
</body> 
  
</html>

Test it Now

Next TopicCSS Images

← prev next →