CSS Advanced

CSS Image Filters

The CSS filter property applies graphical effects like blur, color shifts and brightness directly in the browser, with no image editing software. This guide covers every filter function with runnable examples and a full values table.

The filter Property

The filter property applies one or more visual effects to an element and its content. It is most often used on images, but it works on any element. You pass it one or more filter functions, and they are applied in the order you list them.

img {
  filter: grayscale(100%);
}

/* Multiple filters, applied left to right */
img {
  filter: brightness(1.1) contrast(1.2) saturate(1.3);
}

Filter Functions

Function	Effect	Typical range
blur(px)	Gaussian blur	0px (sharp) to 20px+
brightness(%)	Darken or lighten	0% dark, 100% normal, 200% bright
contrast(%)	Adjust contrast	0% grey, 100% normal, 200% high
grayscale(%)	Remove colour	0% colour, 100% grey
sepia(%)	Warm vintage tone	0% none, 100% full sepia
saturate(%)	Colour intensity	0% grey, 100% normal, 300% vivid
hue-rotate(deg)	Shift hues around the wheel	0deg to 360deg
invert(%)	Invert colours	0% none, 100% negative
opacity(%)	Transparency	0% invisible, 100% opaque
drop-shadow()	Shadow that follows shape	x y blur colour

A Gallery of Filters

The example below shows the same picture with several different filters applied so you can compare them side by side. Edit any value and run it again.

Run this — compare filters

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .grid figure { margin: 0; text-align: center; font: 12px sans-serif; }
  .grid img { width: 100%; border-radius: 8px; display: block; }
  .a { filter: none; }
  .b { filter: grayscale(100%); }
  .c { filter: sepia(90%); }
  .d { filter: blur(3px); }
  .e { filter: brightness(1.4); }
  .f { filter: hue-rotate(120deg); }
</style>
</head>
<body>
  <div class="grid">
    <figure><img class="a" src="https://picsum.photos/id/1015/150/100" alt=""><figcaption>none</figcaption></figure>
    <figure><img class="b" src="https://picsum.photos/id/1015/150/100" alt=""><figcaption>grayscale</figcaption></figure>
    <figure><img class="c" src="https://picsum.photos/id/1015/150/100" alt=""><figcaption>sepia</figcaption></figure>
    <figure><img class="d" src="https://picsum.photos/id/1015/150/100" alt=""><figcaption>blur</figcaption></figure>
    <figure><img class="e" src="https://picsum.photos/id/1015/150/100" alt=""><figcaption>brightness</figcaption></figure>
    <figure><img class="f" src="https://picsum.photos/id/1015/150/100" alt=""><figcaption>hue-rotate</figcaption></figure>
  </div>
</body>
</html>

Hover to Reveal Colour

A popular pattern is to grayscale an image by default and restore its colour on hover, using a transition for a smooth fade. This works well for logo walls and photo grids.

Run this — hover the image

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .thumb {
    filter: grayscale(100%);
    transition: filter .35s ease;
    border-radius: 10px;
  }
  .thumb:hover { filter: grayscale(0%); }
</style>
</head>
<body>
  <img class="thumb" src="https://picsum.photos/id/1025/240/160" alt="Hover me" width="240" height="160">
</body>
</html>

💡

drop-shadow() differs from box-shadow: it follows the alpha channel of the image, so a transparent PNG casts a shadow around its actual shape, not a rectangle.

⚠️

Filters can be GPU-expensive, especially blur on large or animated elements. Test on lower-end devices and avoid animating heavy blur on many elements at once.

Key points

filter applies visual effects in the browser without editing the source image.
You can chain multiple functions; they apply in written order.
grayscale, sepia, brightness, contrast and saturate take percentages; blur takes a length; hue-rotate takes degrees.
Combine filter with transition for smooth hover effects.
drop-shadow() respects transparency, unlike box-shadow.