Filters

CSS filters are a powerful feature that allows developers to apply various visual effects to elements on a web page. In this guide, we will explore the advanced features of CSS filters. By the end, you will have an understanding of these filters and how to apply them to create websites.

Grayscale

Grayscale is a CSS filter that converts an element's color to shades of gray. By adjusting the grayscale value, you can create unique effects, such as making a vintage image or adding emphasis to specific sections of a webpage. To apply grayscale, use the filter property and set the value to grayscale(n), where n is the value between 0 (no grayscale) and 1 (full grayscale).

.img--modified {
  filter: grayscale(.8)
}

Blur

Blur is a CSS filter that adds a blur effect to an element, giving it a softer or dreamy appearance. This effect can be particularly useful for creating overlays, highlighting content, or adding depth to backgrounds. To apply blur, use the filter property and set the value to blur(n), where n represents the blur radius in pixels.

.img--modified {
  filter: blur(5px);
}

Brightness

Brightness is a CSS filter that adjusts the overall lightness or darkness of an element. It can be used to create dramatic lighting effects or to improve the visibility of content on darker backgrounds. To modify brightness, use the filter property and set the value to brightness(n), where n is the value between 0 (completely dark) and 1 (normal brightness). Experiment with different brightness values to achieve the desired lighting effect.

.img--modified {
  filter: brightness(.5);
}

Contrast

Contrast is a CSS filter that changes the difference between light and dark elements of an element. It can be used to make content stand out or enhance the readability of text. To apply contrast, use the filter property and set the value to contrast(n), where n is the value between 0 (no contrast) and 1 (maximum contrast).

.img--modified {
  filter: contrast(.3);
}

Hue-rotate

Hue-rotate is a CSS filter that changes the color hue of an element, creating a color-shifting effect. This feature is ideal for creating interactive or dynamic visual experiences. To apply a hue-rotate filter, use the filter property and set the value to hue-rotate(angle), where angle represents the amount of degrees for the hue rotation. Try different angle values to achieve vibrant and eye-catching effects.

.img--modified {
  filter: hue-rotate(45deg)
}

Invert

Invert is a CSS filter that allows you to invert the colors of an element, creating a striking visual effect. To apply the invert filter, use the filter property and set the value to invert(n), where n is the value between 0 (no inversion) and 1 (full inversion).

.img--modified {
  filter: invert(.8)
}

Opacity

Opacity is a CSS property that controls the transparency level of an element. To modify the opacity, use the opacity property and set the value to a decimal between 0 (completely transparent) and 1 (fully opaque).

.img--modified {
  filter: opacity(.4)
}

Saturate

Saturate is a CSS filter that controls the saturation level of an element's colors. It can be used to make colors more vibrant and intense or to desaturate them for a muted effect. To apply saturation, use the filter property and set the value to saturate(n), where n is the value between 0 (completely desaturated) and 1 (normal saturation).

.img--modified {
  filter: saturate(.3);
}

Sepia

Sepia is a CSS filter that adds a warm, vintage tone to an element, giving it an aged or nostalgic appearance. To apply the sepia filter, use the filter property and set the value to sepia(n), where n is the value between 0 (no sepia effect) and 1 (full sepia effect).

.img--modified {
  filter: sepia(.6);
}

Drop-shadow

Drop-shadow is a CSS filter that adds a shadow effect to an element, creating a sense of depth and dimension. To apply the drop shadow filter, use the filter property and set the value to drop-shadow(xOffset yOffset blurRadius color), where xOffset and yOffset specify the horizontal and vertical distance of the shadow, blurRadius determines the blur level of the shadow, and color sets the color of the shadow.

.img--modified {
  filter: drop-shadow(5px 5px 10px #000);;
}

URL

URL is a CSS filter that allows you to apply an SVG (Scalable Vector Graphics) filter to an element by referencing an external SVG file. To apply the URL filter, use the filter property and set the value to url(filter.svg#filterID), where filter.svg is the path to the SVG file and filterID is the ID of the filter within the SVG file.

<svg>
    <defs>
        <filter id="blur-svg" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
      </defs>
</svg>

.img--modified {
  filter: url("#blur-svg");
}

Using multiple CSS filters

In addition to the individual CSS filters discussed in the previous sections, it is also possible to combine multiple filters to achieve more complex and creative visual effects.

To use multiple CSS filters, just list them one after another within the filter property, separated by spaces. Here's an example:

.img--modified {
  filter: grayscale(0.5) blur(2px) brightness(1.5);
}

In the example above, the element will have a grayscale effect with a value of 0.5, a blur effect with a radius of 3 pixels, and a brightness adjustment of 1.2. You can add as many filters as you need, separated by spaces.

By leveraging multiple CSS filters, you can create visually stunning effects that were not possible with individual filters alone. The order in which the filters are listed also affects the results you would get.

However, be careful using multiple filters, as they can have huge effects on the appearance and performance of your web page. Too many filters or excessive values can lead to slower rendering times or loss of clarity in the visual output. Always test and optimize your filters to find the right balance.

Conclusion

In this guide, we've explored major aspects of CSS filters. By using these filters with the filter property, you can create stunning and engaging websites. Remember to experiment with different values and combinations to achieve the desired effects.