Learn Filters & Blend Modes

CSS Filters

The filter property lets you apply graphical effects to any element — similar to photo editing tools, but directly in CSS.

Available filter functions

Filter	What it does	Example
`blur(px)`	Applies a Gaussian blur	`filter: blur(4px)`
`brightness(%)`	Adjusts brightness (100% = normal)	`filter: brightness(150%)`
`contrast(%)`	Adjusts contrast (100% = normal)	`filter: contrast(200%)`
`grayscale(%)`	Converts to grayscale (100% = fully gray)	`filter: grayscale(100%)`
`sepia(%)`	Applies a sepia tone (100% = full sepia)	`filter: sepia(80%)`
`hue-rotate(deg)`	Rotates the hue of all colors	`filter: hue-rotate(90deg)`
`invert(%)`	Inverts colors (100% = fully inverted)	`filter: invert(100%)`
`opacity(%)`	Adjusts transparency (similar to the opacity property)	`filter: opacity(50%)`
`saturate(%)`	Adjusts color saturation (100% = normal)	`filter: saturate(200%)`
`drop-shadow()`	Adds a drop shadow (follows alpha channel)	`filter: drop-shadow(2px 2px 4px black)`

You can chain multiple filters together:

css

filter: grayscale(50%) brightness(120%) contrast(110%);

Filters and Backdrop-Filter

html

<style>
  .container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .box {
    width: 120px;
    height: 80px;
    background-color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px;
  }

  .blur { filter: blur(2px); }
  .bright { filter: brightness(150%); }
  .gray { filter: grayscale(100%); }
  .sepia { filter: sepia(100%); }
  .hue { filter: hue-rotate(90deg); }

  /* Backdrop-filter: blurs what is BEHIND the element */
  .frosted {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
  }
</style>

<div class="container">
  <div class="box blur">blur(2px)</div>
  <div class="box bright">bright(150%)</div>
  <div class="box gray">grayscale</div>
  <div class="box sepia">sepia</div>
  <div class="box hue">hue-rotate</div>
</div>

<div class="frosted">Frosted glass effect with backdrop-filter</div>

Blend Modes

Blend modes control how an element's colors interact with what is behind it, similar to blending modes in Photoshop.

mix-blend-mode

Applied to an element, it blends the element with its background:

css

.overlay-text {
  mix-blend-mode: multiply;
}

background-blend-mode

Blends an element's background layers (background-color and background-image) together:

css

.hero {
  background-image: url(photo.jpg);
  background-color: #3498db;
  background-blend-mode: overlay;
}

Common blend mode values

normal — No blending (default).
multiply — Darkens by multiplying colors. White disappears.
screen — Lightens. Black disappears.
overlay — Combines multiply and screen. Preserves highlights and shadows.
darken / lighten — Keeps the darker/lighter pixel of each layer.
color-dodge / color-burn — Brightens/darkens dramatically.
difference — Shows the difference between layers. Same colors become black.

Blend modes are powerful for creating artistic effects, text treatments over images, and UI overlays.

Filters & Blend Modes