css-filters.md

⚑ CSS Filters

This properties is used to apply the various effects to the elements for differentiate or make them match to the theme.

☴ Overview:

1. Blur
2. Brightness
3. Contrast
4. Grayscale
5. Hue-rotate
6. Invert
7. Opacity
8. Sepia
9. Multiple Filters Effect

✦ Blur:

It applies a Gaussian blur effect to an element.

Syntax: filter: blur(radius);

Example:

.blurred-image {
  filter: blur(5px);
}

✦ Brightness:

It adjusts the brightness of an element.

Syntax: filter: brightness(percentage);

Example:

.brighter-image {
  filter: brightness(120%);
}

✦ Contrast:

It adjusts the contrast of an element.

Syntax: filter: contrast(percentage);

Example:

.higher-contrast-image {
  filter: contrast(150%);
}

✦ Grayscale:

It converts an element to grayscale.

Syntax: filter: grayscale(percentage);

Example:

.grayscale-image {
  filter: grayscale(100%);
}

✦ Hue-Rotate:

It rotates the hue of an element.

Syntax: filter: hue-rotate(angle);

Example:

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

✦ Invert:

It inverts the colors of an element

Syntax: filter: invert(percentage);

Example:

.inverted-image {
  filter: invert(100%);
}

✦ Opacity:

It sets the opacity of an element.

Syntax: filter: opacity(percentage);

Example:

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

✦ Sepia:

It applies a sepia tone to an element.

Syntax: filter: sepia(percentage);

Example:

.sepia-image {
  filter: sepia(100%);
}

✦ Multiple Filters Effect:

It apply the multiple filters to an element. By using the filter property separated by spaces.

Example:

.filtered-image {
  filter: blur(5px) brightness(120%) contrast(150%);
}

---

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page