Adding Visual Effects with CSS Filters

Introduction to CSS Filters

CSS filters provide a way to apply various visual effects (like blur, grayscale, sepia, etc.) to HTML elements, including images and text. Filters modify how an element is rendered before it's displayed on the page, offering a simple way to add interesting visual enhancements to your web designs.

`filter` Property Syntax

The `filter` property allows you to apply one or more filter effects. The syntax is:

filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-rotate() | contrast() | opacity() | grayscale() | sepia() | url();

Common Filter Functions

`brightness()`

Adjusts the brightness of an element. A value of 0% makes it completely black; 100% is the original brightness; values above 100% make it brighter.

`blur()`

Applies a Gaussian blur effect. The parameter is a length value (e.g., blur(5px)). Larger values create a stronger blur.

`invert()`

Inverts the colors of an element. A value of 100% completely inverts the colors; 0% leaves them unchanged. Negative values are not allowed.

`saturate()`

Adjusts the color saturation. 0% is completely desaturated (grayscale); 100% is the original saturation; values above 100% create supersaturated colors.

`drop-shadow()`

Adds a drop shadow effect. The syntax is: drop-shadow(h-shadow v-shadow blur-radius spread-radius color).

`contrast()`

Adjusts the contrast. 0% results in a completely black image; 100% is the original contrast; values above 100% increase contrast.

`opacity()`

Sets the opacity (transparency) of an element. 0% is completely transparent; 100% is fully opaque.

`hue-rotate()`

Rotates the hue (color) of an element. The value is an angle in degrees (e.g., hue-rotate(90deg)).

`grayscale()`

Converts the element to grayscale. 0% is the original colors; 100% is full grayscale.

`sepia()`

Applies a sepia tone effect. 0% is the original colors; 100% is full sepia.