CSS Filters

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:

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:

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:

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.

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.

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.

img {
  filter: drop-shadow(10px 10px);
}

• blur-radius(optional), defines a blur radius for the shadow. Defaulting to 0 (no blur).

img {
  filter: drop-shadow(10px 10px 2px);
}

• spread-radius(optional), defines a spread radius. In px, rem or em.

img {
  filter: drop-shadow(10px 10px 2px 5px);
}

• colour (optional), defines the colour.

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.

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.

img {
  filter: sepia(50%);
}

invert()

Inverts the colours of an element.

The inversion selects the opposite of a colour according to the HSL colour wheel.

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

50% will always render grey colour, as you end up in the middle of the wheel.

img {
  filter: invert(50%);
}

hue-rotate()

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

The function accepts a deg value. With 0deg leaving the input unchanged & 360deg being the max value.

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.

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.

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.

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.

img {
  filter: url(filter.svg);
}

For more on SVG filters check out: https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Related Posts:

• Media Queries
• Feature Queries