CSS Filters and Blend Modes

Filters and blend modes give you photo-editor effects, such as blur, black and white and colour mixing, straight in CSS.

The filter Property

filter changes how an element looks after it is drawn: its colours, sharpness and brightness. It works on images, videos and any other element.

Function	Example	Effect
`blur()`	`blur(4px)`	Makes it blurry
`grayscale()`	`grayscale(100%)`	Black and white
`sepia()`	`sepia(80%)`	Old brown photo look
`brightness()`	`brightness(1.3)`	Lighter (`1` is normal, `0.5` is darker)
`contrast()`	`contrast(1.5)`	Stronger difference between dark and light
`saturate()`	`saturate(2)`	Stronger colours (`0` removes colour)
`hue-rotate()`	`hue-rotate(90deg)`	Shifts all colours around the colour wheel
`invert()`	`invert(100%)`	Swaps colours with their opposites
`opacity()`	`opacity(50%)`	Half see-through
`drop-shadow()`	`drop-shadow(0 4px 6px black)`	A shadow that follows the shape

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
figure { margin: 0; text-align: center; font-size: 13px; }
.pic {
  width: 110px;
  height: 80px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f97316, #db2777 50%, #264de4);
}
.blur   { filter: blur(3px); }
.gray   { filter: grayscale(100%); }
.sepia  { filter: sepia(90%); }
.bright { filter: brightness(1.4); }
.hue    { filter: hue-rotate(120deg); }
</style>
</head>
<body>

<div class="row">
  <figure><div class="pic"></div>normal</figure>
  <figure><div class="pic blur"></div>blur</figure>
  <figure><div class="pic gray"></div>grayscale</figure>
  <figure><div class="pic sepia"></div>sepia</figure>
  <figure><div class="pic bright"></div>brightness</figure>
  <figure><div class="pic hue"></div>hue-rotate</figure>
</div>

</body>
</html>

Try it Yourself »

Combining Filters

Write several functions in one filter, separated by spaces:

Example

css

.old-photo {
  filter: sepia(60%) contrast(1.2) brightness(0.9);
}

Filters work well with transitions. A common pattern shows partner logos in grey, and in colour on hover:

Example

css

.logo {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}
.logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

backdrop-filter: Frosted Glass

filter changes the element itself. backdrop-filter changes what is behind it. With a half-transparent background, this gives the popular "frosted glass" look used in phone menus.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  font-family: Arial, sans-serif;
  min-height: 300px;
  background:
    radial-gradient(circle at 20% 30%, #f97316 0 60px, transparent 61px),
    radial-gradient(circle at 70% 60%, #264de4 0 90px, transparent 91px),
    #fef3c7;
  display: grid;
  place-items: center;
}
.glass {
  padding: 24px 32px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>

<div class="glass">
  <h2>Frosted glass card</h2>
  <p>The shapes behind me are blurred.</p>
</div>

</body>
</html>

Try it Yourself »

Blur filters are heavy work for weak phones. Use them on a few elements, not on long scrolling lists.

Blend Modes

A blend mode decides how colours mix when one layer sits on top of another, just like layer modes in Photoshop.

Mode	Result
`normal`	The top layer simply covers (the default)
`multiply`	Darker: white disappears, dark colours stay
`screen`	Lighter: black disappears, light colours stay
`overlay`	More contrast: mixes multiply and screen
`difference`	Subtracts colours; often looks like inverted colours
`color`	Takes the colour of the top layer and the light and dark of the bottom one
`luminosity`	The opposite of `color`

There are two properties:

background-blend-mode mixes an element's own background layers together
mix-blend-mode mixes the element with whatever is behind it on the page

background-blend-mode

This tints a background with a colour, without any image editor:

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.banner {
  height: 160px;
  display: grid;
  place-items: center;
  color: white;
  font-size: 1.5rem;
  background-color: #264de4;
  background-image: repeating-linear-gradient(45deg, #ffffff 0 20px, #9ca3af 20px 40px);
  background-blend-mode: multiply;
}
</style>
</head>
<body>

<div class="banner">Admissions Open 2026</div>

</body>
</html>

Try it Yourself »

The grey and white stripes mix with the blue: white becomes blue and grey becomes dark blue. With a real photo as background-image, you get a blue-tinted photo.

mix-blend-mode

mix-blend-mode makes an element blend into what is behind it. A popular trick removes the white background of a logo on a coloured section:

Example

css

.logo-on-color {
  mix-blend-mode: multiply;   /* the white parts become see-through */
}

If you need the blending to stop at a certain parent, add isolation: isolate to that parent.

Exercise

Which property blurs what is behind a semi-transparent box, for a frosted glass effect?

filter: blur()backdrop-filter: blur()mix-blend-mode: blurbackground-blend-mode: screen