How to add filter to the background image using CSS ?

Read

Discuss

The purpose of this article is to learn how to add filters to an image using CSS. The CSS filter property is used to set the visual effect of an element. This property is mostly used in image content.

Syntax:

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

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png"); 
            filter: brightness(90%); 
            filter: grayscale(70%); 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2> 
            GeeksForGeeks 
        </h2> 
        <h2> 
            How to add a filter to a  
            background image using CSS? 
        </h2> 
    </center> 
</body> 
  
</html>     

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .darkened-image { 
            filter: brightness(50%); 
            background-image: url( 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191121162913/s11.png"); 
            height: 94px; 
            width: 120px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
        GeeksForGeeks 
    </h1> 
    <p> 
        The image below is the 
        normal image 
    </p> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191121162913/s11.png"> 
  
    <p> 
        The image below is the 
        darkened image: 
    </p> 
  
    <div class="darkened-image"></div> 
</body> 
  
</html>                     

Output:

Supported browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 15 Oct, 2020

How to specify an input field must be filled out before submitting the form in HTML ?

How to return current URL for a share button using JavaScript ?

How to add filter to the background image using CSS ?

HTML

HTML

Please Login to comment...