CSS Filters Tutorial
Tags: css, beginners, tutorial, writing
Published: 2022-07-28 06:34:00

CSS Filters are an extremely useful way to apply visual effects to elements.

Tasks that might usually be performed with Photoshop or other photo editing software, can be done right in CSS!

We can use the `filter` property to add effects such as blur or saturation, or change the opacity or brightness, and more!

Whilst it’s common to use `filter` for image effects, it can actually be used on any element.

The syntax is:
```css
img {
  filter: *value*;
}
```
Where *value* is one of the following:
- `blur()`
- `brightness()`
- `contrast()`
- `drop-shadow()`
- `grayscale()`
- `hue-rotate()`
- `invert()`
- `opacity()`
- `sepia()`
- `saturate()`
- `url()` — for SVG filters

Each filter has a parentheses, this is where we specify its value.

For example:
```css
img {
  filter: opacity(0.5);
}
```
This will make our image 50% transparent, as `opacity()` has a range of 0 to 1, or a percentage value.

We can also apply multiple filters in a single line:
```css
img {
  filter: blur(20px) grayscale(20%);
}
```
Let’s take a look at each filter in detail.

## blur()
`blur()` applies a blur effect to an element.

The value chosen determines the size of the blur radius. The higher the value, the more pixels will blend together, which creates more blur.
```css
img {
  filter: blur(4px);
}
```
The value can be expressed in `px`, `em` or `rem` units.

## opacity()
`opacity()` applies transparency to the element.

It takes a value from 0 to 1, or a percentage (such as 0.5 for 50%), which determines the image transparency.

`0` or `0%`, being fully transparent. `1` or `100%`, being fully visible.
```css
img {
  filter: opacity(0.5);
}
```
CSS also has an `opacity` property. However, browser performance is better with the `filter` property, so this should be the preferred method.

## drop-shadow()
`drop-shadow()` applies a shadow to an element.

It accepts up to 5 parameters, the first 2 (below) are compulsory:

- _offset-x_ defines the horizontal offset.
- _offset-y_ defines the vertical offset.
```css
img {
  filter: drop-shadow(10px 10px);
}
```

- _blur-radius_(optional), defines a blur radius for the shadow. Defaulting to 0 (no blur).
```css
img {
  filter: drop-shadow(10px 10px 2px);
}
```

- _spread-radius_(optional), defines a spread radius. In `px`, `rem` or `em`.
```css
img {
  filter: drop-shadow(10px 10px 2px 5px);
}
```
- _color_ (optional), defines the color.
```css
img {
  filter: drop-shadow(10px 10px 2px 5px red);
}
```

## grayscale()
Converts the element to grayscale.

The value sets the proportion, with 100% being completely grayscale & 0% leaving the element unchanged.
```css
img {
  filter: grayscale(50%);
}
```

## sepia()
Converts the element to sepia.

Again, the value sets the proportion, with 100% being completely sepia & 0% leaving the element unchanged.
```css
img {
  filter: sepia(50%);
}
```

## invert()
Inverts the colors of an element.

The inversion selects the opposite of a color according to the HSL [color wheel](https://color.adobe.com/create/color-wheel).

A value of 100% is completely inverted & 0% leaves the element unchanged.

50% will always render grey color, as you end up in the middle of the wheel.
```css
img {
  filter: invert(50%);
}
```

## hue-rotate()
The color wheel is represented in degrees. `hue-rotate()` lets you rotate the color using a positive or negative rotation.

The function accepts a `deg` value. With 0deg leaving the input unchanged & 360deg being the max value.
```css
img {
  filter: hue-rotate(90deg);
}
```

## brightness()
`brightness()` makes an element appear more or less bright.

With a value of 0%, the element will appear completely black. 100% will leave the element unchanged.
```css
img {
  filter: brightness(50%);
}
```

## contrast()
`contrast()` changes the contrast of the element.

With a value of 0%, the element will appear completely grey. 100% will leave the element unchanged.
```css
img {
  filter: contrast(150%);
}
```

## saturate()
`saturate()` will alter the saturation of the element.

A value of 0% is completely un-saturated (it will be entirely greyscale). A value of 100% leaves the element unchanged.
```css
img {
  filter: saturate();
}
```

## url()
`url()` allows you to apply a filter defined in an SVG file.

The parameter will be the location of the file.
```css
img {
  filter: url(filter.svg);
}
```
## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)