CSS filter Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 26 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The filter property in CSS provides a way to apply graphical effects like blur, grayscale, brightness, and contrast to elements.

This property is useful for adding visual effects without needing to modify the original image or content. It can be applied to any HTML element but is most commonly used with images and other graphical elements.

💡 Syntax

The syntax for the filter property is as follows:

Syntax

Copied

element {
  filter: filter-function(value);
}

You can apply multiple filters by separating them with spaces:

Syntax

Copied

element {
  filter: filter-function1(value1) filter-function2(value2);
}

🎛️ Default Value

The default value for the filter property is none, which means no filter effects are applied.

🏠 Property Values

Value	Description
none	Default value. No filter effects are applied.
blur(px)	Applies a Gaussian blur to the element. The px value defines the radius of the blur.
brightness(%)	Adjusts the brightness of the element. The percentage defines the level of brightness (0% is completely dark, 100% is the original brightness).
contrast(%)	Adjusts the contrast of the element. The percentage defines the level of contrast (0% is completely gray, 100% is the original contrast).
grayscale(%)	Converts the element to grayscale. The percentage defines the level of grayscale (0% is the original color, 100% is completely grayscale).
invert(%)	Inverts the colors of the element. The percentage defines the amount of inversion (0% is the original color, 100% is completely inverted).
opacity(%)	Adjusts the opacity of the element. The percentage defines the level of transparency (0% is completely transparent, 100% is fully opaque).
saturate(%)	Saturates the colors of the element. The percentage defines the level of saturation (0% is completely unsaturated, 100% is the original color).
sepia(%)	Applies a sepia tone to the element. The percentage defines the level of sepia (0% is the original color, 100% is completely sepia).
drop-shadow(offset-x offset-y blur-radius color)	Applies a drop shadow to the element. The offset-x and offset-y values define the position of the shadow, blur-radius defines the blur radius, and color defines the color of the shadow.

📄 Example

In this example, we'll apply a blur effect to an image.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS filter Example</title>
  <style>
    img {
      filter: blur(5px);
    }
  </style>
</head>
<body>
  <h1>Image with Blur Effect</h1>
  <img src="path-to-your-image.jpg" alt="Blurred Image">
</body>
</html>

🖥️ Browser Compatibility

The filter property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it's always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The filter property is a versatile tool for web developers to enhance the visual appeal of their websites.

By applying various graphical effects, you can create unique and engaging user experiences. Experiment with different filter functions and values to see how they can transform your web elements.