Filters

CSS filters are a handy 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, change the opacity, brightness, and more! While it’s common to use a filter for image effects, it can be used on any element.

The syntax is as follows:

img {
  filter: *value*;
}

Our filter options are:

• blur()
• contrast()
• brightness()
• grayscale()
• drop-shadow()
• hue-rotate()
• opacity()
• invert()
• sepia()
• saturate()
• url()

The value of each filter is specified in the parentheses that are attached to it.

For example:

img {
  filter: opacity(0.5);
}

This makes our image 50% transparent because opacity() ranges from 0 to 1, or we can use a percentage value.

We can also apply multiple filters in a single line of code:

img {
  filter: blur(20px) grayscale(20%);
}

Let’s take a look at each filter in detail.

The blur() filter

The blur() filter applies a blur effect to an element.

The value chosen determines the size of the blur’s radius. The larger the value, the larger the number of pixels blended, creating more blur.

img {
  filter: blur(4px);
}

The value can be expressed in px, rem or em units.

The opacity() filter

The opacity() filter applies transparency to an element.

It takes a value from 0 to 1, or we can use a percentage value such as 0.5 for 50%. This filter determines the image’s transparency.

0, or 0%, is fully transparent and 1, or 100%, is fully visible.

img {
  filter: opacity(0.5);
}

CSS also has an opacity property. However, browser performance is better with the filter property, so this option is preferred.

The drop-shadow() filter

The drop-shadow() filter applies a shadow to an element.

It accepts up to five parameters, the first 2 given below are required:

• The offset-x parameter defines the horizontal offset.
• The offset-y parameter defines the vertical offset.

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

• The blur-radius parameter defines a blur radius for the shadow. Its default value is 0 (no blur).

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

• The spread-radius parameter defines a spread radius, measured by px, rem or em.

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

• The color parameter defines the color.

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

The grayscale() filter

The grayscale() filter converts an element to grayscale.

The value sets the proportion. 0% (or 0) is equal to the default image. The image becomes completely gray if we use 100%.

img {
  filter: grayscale(50%);
}

The sepia() filter

The sepia() filter converts the element to sepia.

Again, the value sets the proportion, with 100% being completely sepia and 0% leaving the element unchanged.

img {
  filter: sepia(50%);
}

invert()

Inverts the colors of an element. The invert() filter inverts the colors of an element. The inversion selects the opposite color according to the HSL color wheel.

A value of 100% is completely inverted and 0% leaves the element unchanged. A value of 50% always renders a gray color because gray is in the middle of the wheel.

img {
  filter: invert(50%);
}

The hue-rotate() filter

The color wheel is represented in degrees. The hue-rotate() filter lets us rotate the color using a positive or negative rotation. The function accepts a deg value for “degree,” with 0deg leaving the input unchanged and 360deg being the maximum value.

img {
  filter: hue-rotate(90deg);
}

The brightness() filter

The brightness() filter adjusts the brightness of an element. With a value of 0%, the element appears completely black. A value of 100% leaves the element unchanged.

img {
  filter: brightness(50%);
}

The contrast() filter

The contrast() filter changes the element’s contrast. With a value of 0%, the element appears completely gray. A value of 100% leaves the element unchanged.

img {
  filter: contrast(50%);
}

The saturate() filter

The saturate() filter changes the element’s saturation. A value of 0% is completely unsaturated (entirely grayscale). If we use 100%, the element doesn’t change.

img {
  filter: saturate(50%);
}

The url() filter

The url() filter lets us add a set filter that’s located in a separate SVG file.

Note: SVG stands for Scalable Vector Graphics. It’s an XML-based image format for graphics that supports various types of animation. Our parameter is the location of the file:

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