MakeW3web

CSS filters

CSS filters are a way to apply visual effects to HTML elements. You can use CSS filters to adjust the brightness, contrast, saturation, and hue of an element's content. You can also apply effects like blur, grayscale, and sepia.

To apply a CSS filter to an element, you use the `filter` property. The `filter` property takes a function as its value. The function specifies the filter to apply and any additional parameters.

Here are some examples of CSS filters:

1. Grayscale: The `grayscale()` function is used to make an element's content grayscale. The value of the function specifies the amount of grayscale to apply, from 0 (no grayscale) to 1 (full grayscale).

.grayscale {
  filter: grayscale(1);
}

2. Blur: The `blur()` function is used to blur an element's content. The value of the function specifies the amount of blur to apply, in pixels.

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

3. Brightness: The `brightness()` function is used to adjust the brightness of an element's content. The value of the function specifies the amount of brightness to apply, from 0 (completely black) to 1 (original brightness) to higher values (brighter than the original).

.brightness {
  filter: brightness(0.5);
}

4. Contrast: The `contrast()` function is used to adjust the contrast of an element's content. The value of the function specifies the amount of contrast to apply, from 0 (no contrast) to 1 (original contrast) to higher values (higher contrast).

.contrast {
  filter: contrast(1.5);
}

5. Sepia: The `sepia()` function is used to apply a sepia effect to an element's content. The value of the function specifies the amount of sepia to apply, from 0 (no sepia) to 1 (full sepia).

.sepia {
  filter: sepia(0.8);
}

6. Saturation: The `saturate()` function is used to adjust the saturation of an element's content. The value of the function specifies the amount of saturation to apply, from 0 (completely desaturated) to 1 (original saturation) to higher values (more saturated than the original).

.saturate {
  filter: saturate(2);
}

7. Hue-rotate: The `hue-rotate()` function is used to rotate the hue of an element's content. The value of the function specifies the angle of rotation, in degrees.

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

These are just a few examples of CSS filters. There are many other filters you can apply, and you can even combine multiple filters to achieve more complex effects.

Was this page helpful?