The **`filter` property** in #key# CSS: Cascade Style Sheets #key# is used to provide the visual or graphical effects to the HTML elements.



# 
#  Syntax

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

# 
## Property values

- **`none`**: It is the default value. It is used to specify that there is no effect. 

- **`blur(px)`**: It is used to specify that how much we want to blur the image. The default value is 0.

- **`brightness(%)`**: It is used to adjust the brightness of the image. 100% shows the original image. 0% shows a completely black image. Values over 100% show more bright images.

- **`contrast(%)`**: It is used to adjust the contrast of the image. 100% shows the original image. 0% shows a completely black image. Values over 100% show more contrast images.

- **`drop-shadow`**: It is used to apply the effect of drop-shadows to an image. 

- **`grayscale(%)`**: it is used to convert the image to grayscale. 0% is used to show the original image. 100% is used to make the image look completely gray which is specifically used for black and white images. Negative values are not allowed.

- **`hue-rotate (deg)`**: It is used to apply the hue rotation to the image. 0deg is used to represent the original image. The maximum value of deg is 360deg.

- **`invert(%)`**: It is used to invert the samples in the image. 0% is the default value it is used to represent the original image. 100% is used to make the image completely inverted. Negative values are not allowed. 

- **`opacity(%)`**: It is used to set the opacity(transparency) level of the image. 0% is used to make the image completely transparent. 100% is used to represent the original image. Negative values are not allowed. 

- **`saturate(%)`**: It is used to adjust the saturation of the image. 100% shows the original image. 0% shows a completely un-saturated image. Values over 100% show more saturated images. Negative values are not allowed.

- **`sepia(%)`**: It is used to convert the images to sepia. 0% is the default value it is used to represent the original image. 100% is used to make the image completely sepia. Negative values are not allowed. 

- **`url()`**: It is used to include the anchor to a specific filter element. 

- **`initial`**: set the value to its default value.

- **`inherit`**: inherits the property from its parent value.

##
## Code

The basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `filter` property is as follows:

<div>
Original Image:
<img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg" alt="Sample image">
</div>

<div>
Filtered Image:
<img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg" alt="Sample image" class="filtered">
</div>

div {
  width: 300px;
  margin: 0 20px;
  float: left;
}
.filtered {
  filter: contrast(150%);
}

codemirror

In this example we can see that we have set the contrast of the image. We can also change different things depending upon the requirements. 

What is the CSS filter property?

The CSS filter property applies visual effects like blur, brightness, contrast, grayscale, and more to HTML elements.