CSS Filters

The CSS filter property allows you to apply graphical effects to elements (usually images), similar to filters in Photoshop. You can use it to adjust the rendering of an element, such as blurring, changing color saturation, brightness, and contrast.

filter Property

The filter property accepts one or more filter functions as its value.

blur()

Applies a Gaussian blur effect to the image. The larger the value, the higher the blur. 0 means no blur.

filter: blur(5px);

brightness()

Adjusts the brightness of the image. 0% makes the image completely black, 100% is the original brightness, and values over 100% make it brighter.

filter: brightness(200%);

contrast()

Adjusts the contrast of the image. 0% makes the image completely gray, 100% is the original contrast, and values over 100% increase contrast.

filter: contrast(150%);

grayscale()

Converts the image to grayscale. 100% means completely grayscale, 0% means the original image.

filter: grayscale(100%);

invert()

Inverts the colors of the image. 100% means completely inverted, 0% means the original image.

filter: invert(100%);

opacity()

Adjusts the transparency of the image. 0% means completely transparent, 100% means completely opaque. This has the same effect as the opacity property.

filter: opacity(50%);

saturate()

Adjusts the color saturation of the image. 0% means completely unsaturated (grayscale), 100% is the original saturation, and values over 100% increase saturation.

filter: saturate(250%);

sepia()

Applies a sepia tone effect to the image (old photo effect). 100% means completely sepia, 0% means the original image.

filter: sepia(100%);

hue-rotate()

Rotates the hue of the image. The value is an angle, where 0deg to 360deg corresponds to a full circle on the color wheel.

filter: hue-rotate(90deg);

drop-shadow()

The drop-shadow() function is similar to the box-shadow property, but with a key difference: drop-shadow creates a shadow for the non-transparent parts of the element's content. This is very useful for irregular PNG images or SVG graphics, as it creates a shadow along the actual outline of the content, not the element's rectangular bounding box.

filter: drop-shadow(8px 8px 10px gray);

Multiple Filters

You can chain multiple filter functions together, separated by spaces, to create more complex effects.

img:hover {
  filter: blur(2px) grayscale(80%) brightness(120%);
}

CSS filters provide front-end developers with a powerful tool to dynamically and interactively change the visual appearance of elements without relying on graphic editing software.