# CSS Filters

The `filter` CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

## 1. Syntax

```css
filter: none | <filter-function> [<filter-function>]*;
```

You can apply multiple filters by separating them with spaces.

```css
img {
  filter: grayscale(100%) blur(5px);
}
```

## 2. Filter Functions

### `blur()`
Applies a Gaussian blur to the input image.
*   Value: Length (px, em, etc.). Default is 0.

```css
filter: blur(5px);
```

### `brightness()`
Adjusts the brightness of the image.
*   Value: Number or Percentage. `1` or `100%` is original. `0%` is black. >`100%` is brighter.

```css
filter: brightness(150%);
```

### `contrast()`
Adjusts the contrast of the image.
*   Value: Number or Percentage. `1` or `100%` is original. `0%` is gray. >`100%` is more contrast.

```css
filter: contrast(200%);
```

### `drop-shadow()`
Applies a drop shadow effect to the input image. Unlike `box-shadow`, which applies to the element's box, `drop-shadow` applies to the alpha mask of the image (useful for transparent PNGs/SVGs).

```css
/* offset-x offset-y blur-radius color */
filter: drop-shadow(8px 8px 10px gray);
```

### `grayscale()`
Converts the input image to grayscale.
*   Value: Number or Percentage. `1` or `100%` is completely gray. `0%` is original.

```css
filter: grayscale(100%);
```

### `hue-rotate()`
Applies a hue rotation on the input image.
*   Value: Angle (deg). `0deg` is original.

```css
filter: hue-rotate(90deg);
```

### `invert()`
Inverts the samples in the input image.
*   Value: Number or Percentage. `1` or `100%` is completely inverted. `0%` is original.

```css
filter: invert(100%);
```

### `opacity()`
Applies transparency to the input image. Similar to the `opacity` property, but some browsers optimize filters differently.
*   Value: Number or Percentage. `0%` is transparent. `100%` is original.

```css
filter: opacity(50%);
```

### `saturate()`
Saturates the input image.
*   Value: Number or Percentage. `1` or `100%` is original. `0%` is unsaturated. >`100%` is super-saturated.

```css
filter: saturate(200%);
```

### `sepia()`
Converts the input image to sepia.
*   Value: Number or Percentage. `1` or `100%` is completely sepia.

```css
filter: sepia(100%);
```

## 3. Initial and Inherit

*   `initial`: Sets the property to its default value.
*   `inherit`: Inherits the property from its parent element.

[[programming/css/css]]
[[programming/css/css3]]
[[programming/css/colors-and-backgrounds]]