# filter property

The `filter` property gives a background image a specific art style or filter. The property can take as values ​​the names of art styles generated by the `filter` function or `none` (cancels a selected filter).

## Syntax

`selector { filter: art style or none; }`

## Example

Let's set a black and white filter for our image, and cancel it on hover:

`<div id="elem"></div>` `#elem { filter: grayscale(100%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; } #elem:hover { filter: none; }`

:

## See also

- the `background` property
  that is a shorthand property for a background
- the `blur` function
  that blurs a background
- the `brightness` function
  that sets a background brightness
- the `contrast` function
  that sets a background contrast
- the `drop-shadow` function
  that sets a background shadow
- the `hue-rotate` function
  that sets a background hue
- the `invert` function
  that inverts background colors
- the `opacity` function
  that sets a background opacity
- the `sepia` function
  that converts a background to sepia

← →
↑
en ru