Home » Programming » Css » Filters
📌 Pin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
2 min read

CSS Filters

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

1. Syntax

filter: none | <filter-function> [<filter-function>]*;

You can apply multiple filters by separating them with spaces.

img {
  filter: grayscale(100%) blur(5px);
}

2. Filter Functions

blur()

Applies a Gaussian blur to the input image.

  • Value: Length (px, em, etc.). Default is 0.
filter: blur(5px);

brightness()

Adjusts the brightness of the image.

  • Value: Number or Percentage. 1 or 100% is original. 0% is black. >100% is brighter.
filter: brightness(150%);

contrast()

Adjusts the contrast of the image.

  • Value: Number or Percentage. 1 or 100% is original. 0% is gray. >100% is more contrast.
filter: contrast(200%);

drop-shadow()

Applies a drop shadow effect to the input image. Unlike box-shadow, which applies to the element's box, drop-shadow applies to the alpha mask of the image (useful for transparent PNGs/SVGs).

/* offset-x offset-y blur-radius color */
filter: drop-shadow(8px 8px 10px gray);

grayscale()

Converts the input image to grayscale.

  • Value: Number or Percentage. 1 or 100% is completely gray. 0% is original.
filter: grayscale(100%);

hue-rotate()

Applies a hue rotation on the input image.

  • Value: Angle (deg). 0deg is original.
filter: hue-rotate(90deg);

invert()

Inverts the samples in the input image.

  • Value: Number or Percentage. 1 or 100% is completely inverted. 0% is original.
filter: invert(100%);

opacity()

Applies transparency to the input image. Similar to the opacity property, but some browsers optimize filters differently.

  • Value: Number or Percentage. 0% is transparent. 100% is original.
filter: opacity(50%);

saturate()

Saturates the input image.

  • Value: Number or Percentage. 1 or 100% is original. 0% is unsaturated. >100% is super-saturated.
filter: saturate(200%);

sepia()

Converts the input image to sepia.

  • Value: Number or Percentage. 1 or 100% is completely sepia.
filter: sepia(100%);

3. Initial and Inherit

  • initial: Sets the property to its default value.
  • inherit: Inherits the property from its parent element.

programming/css/css programming/css/css3 programming/css/colors-and-backgrounds

Backlinks

Created: March 17, 2026 • Last Modified: February 1, 2026