CSS Filters

CSS filters are powerful tools that allow you to apply graphical effects like blurring, color shifting, and shadowing to elements without changing the underlying HTML structure.

This chapter will introduce you to the various CSS filter properties:

Filter

The filter property is used to apply visual effects to elements. Multiple filter functions can be combined, separated by spaces, to create complex effects.

.element {
  filter: filter-function1(value) filter-function2(value) ...;
}

Let's look at some of the most commonly used filter functions:

Blur

The blur() function applies a Gaussian blur to the element. The value specifies the radius of the blur.

.element {
  filter: blur(5px);
}

Brightness

The brightness() function adjusts the brightness of the element. A value greater than 100% increases brightness, while a value less than 100% decreases it.

.element {
  filter: brightness(150%);
}

Contrast

The contrast() function adjusts the element's contrast. A value greater than 100% increases contrast, while a value less than 100% decreases it.

.element {
  filter: contrast(200%);
}

Grayscale

The grayscale() function converts the element's colors to shades of gray. A value of 100% fully desaturates the colors.

.element {
  filter: grayscale(100%);
}

Hue Rotate

The hue-rotate() function applies a hue rotation to the element, changing its colors. The value is an angle in degrees.

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

Invert

The invert() function inverts the colors of the element. A value of 100% fully inverts the colors.

.element {
  filter: invert(100%);
}

Opacity

The opacity() function adjusts the transparency of the element. A value of 0% makes the element fully transparent, while a value of 100% makes it fully opaque.

.element {
  filter: opacity(50%);
}

Saturate

The saturate() function adjusts the saturation of the element. A value greater than 100% increases saturation, while a value less than 100% decreases it.

.element {
  filter: saturate(200%);
}

Sepia

The sepia() function applies a sepia tone to the element, giving it a warm, brownish color.

.element {
  filter: sepia(100%);
}

Drop Shadows

The drop-shadow function is similar to the box-shadow property but is used within the filter property to add a shadow effect. It allows for more complex shadows, especially when combined with other filters.

.element {
  filter: drop-shadow(offset-x offset-y blur-radius color);
}

• offset-x: Required. The horizontal offset of the shadow.
• offset-y: Required. The vertical offset of the shadow.
• blur-radius: Optional. The blur radius of the shadow.
• color: Optional. The color of the shadow.

.element {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

It's probably my most used filter, so here's a CodePen to play around with the values.

Combining Filters Example

As mentioned, you can combine multiple filter functions to create more complex effects. The functions are applied in the order they are specified.

.element {
  filter: brightness(150%) contrast(200%) blur(5px) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

Let's see these filter properties with this CodePen.

As you can see, CSS filters provide a versatile way to apply visual effects to elements on your web page. As usual, start with the examples and practice using these filters to enhance your designs and make your web pages more visually appealing.