Understanding the CSS3 Filter Functions

The filter functions are used to set visual effects on elements like contrast, brightness, hue rotation, opacity, on images, etc. Let us now see some filter functions.

Syntax

The following is the syntax of the filter in CSS −

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

As you can see above, with the filter property, we can set the following effects: blur, contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url.

Invert

The invert() is used to invert the samples in an image. Here, 0% (0) is the actual image whereas the value 100% will make the invert the image completely. To invert an image in CSS3, use the invert() for the filter property.

Example

Let us see an example to add a visual effect to images with invert −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
      img{
         margin: 20px;
      }
      img.normal{
         width: 300px;
         height: 300px;
      }
      img.filter {
         width: 300px;
         height: 300px;
         filter: invert(100%);
      }
   </style>
</head>
<body>
   <h1>CSS Image effects example</h1>
   <img class="normal" src="https://www.tutorialspoint.com/python/images/python-mini-logo.jpg">
   <img class="filter" src="https://www.tutorialspoint.com/python/images/python-mini-logo.jpg">
</body>
</html>

Contrast

To set image contrast in CSS, use filter contrast(%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image with more contrast.

Example

Let us now see an example to adjust image contrast with CSS3 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      img.demo {
         filter: brightness(120%);
         filter: contrast(120%);
      }
   </style>
</head>
<body>
   <h1>Learn MySQL</h1>
   <img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
   <h1>Learn MySQL</h1>
   <p>Below image is brighter and has more contrast than the original image above.</p>
   <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

Blur

The filter property is used to set visual effects, such as blurr, drop shadow, contrast, brightness, saturation, shadow to images in CSS. We will see how to create a blurry image. The blur is used to blur an image. To set the blur effect in CSS3, use the blur value for filter property:. The larger the value, the more blur it will be.

Example

The following is the code to create a blurry background image with CSS −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body,
      html {
         height: 100vh;
         margin: 0;
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      * {
         box-sizing: border-box;
      }
      .backgroundImage {
         background-image: url("https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
         filter: blur(10px);
         height: 100%;
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
      }
      .transparentText {
         background-color: rgba(0, 0, 0, 0.4);
         color: white;
         border: 3px solid #f1f1f1;
         position: absolute;
         top: 40%;
         left: 30%;
         width: 50%;
         padding: 20px;
         text-align: center;
      }
   </style>
</head>
<body>
   <div class="backgroundImage"></div>
   <div class="transparentText">
      <h1>I am Amit</h1>
      <h1>I am an Entrepreneur</h1>
   </div>
</body>
</html>

Drop Shadow

To add drop shadow to image in CSS3, use the drop-shadow value for filter property. It has the following values −

  • h-shadow − To specify a pixel value for the horizontal shadow.

  • v-shadow − To specify a pixel value for the vertical shadow. Negative values place the shadow above the image.

  • blur − To add a blur effect to the shadow.

  • spread − Positive values causes the shadow to expand and negative to shrink.

  • color − To add color to the shadow

Example

Let us now see an example −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      img.demo {
         filter: brightness(120%);
         filter: contrast(120%);
         filter: drop-shadow(10px 10px 10px green);
      }
   </style>
</head>
<body>
   <h1>Learn MySQL</h1>
   <img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
   <h1>Learn MySQL</h1>
   <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

Sepia Effect

To apply sepia effect to images using CSS3, use the sepia value for filter property. The code is as follows −

Example

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      img.demo {
         filter: sepia(100%);
      }
   </style>
</head>
<body>
   <h1>Learn Spring Framework</h1>
   <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
   <h1>Learn Spring Framework</h1>
   <img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

Hue Rotation

The hue rotation adjusts i.e., increase, or decrease the image hue value. To set the hue rotation of an image in CSS3, use the hue-rotate value for filter property. The hue rotation is set with a degree value i.e.

  • Actual Image − 0 deg i.e., default

  • Rotate 30 degrees − 30 deg

  • Rotate 90 degrees− 90 deg, etc.

  • Positive hue rotate − Increases the hue value

  • Negative hue rotate − Decreases the hue value

Example

Let us now see an example to apply hue rotation with CSS3. We will set 45 degrees with hue rotation −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      img.demo {
         filter: hue-rotate(45deg);
      }
   </style>
</head>
<body>
   <h1>Learn Spring Framework</h1>
   <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
   <h1>Learn Spring Framework</h1>
   <img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
Updated on: 2023-12-27T15:54:12+05:30

135 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements