Filter & Blend Modes

CSS filters let you apply visual effects to elements such as blur, brightness, contrast, grayscale, and more. Just like filters in a photo editing app, but applied directly in the browser.

backdrop-filter works similarly, but it is applied to the area behind the element, not to the element itself. This is very popular for creating the "frosted glass" effect or glassmorphism.

mix-blend-mode controls how an element's colors blend with the elements behind it. There are many modes such as multiply, screen, overlay, and others. Just like blend modes in Photoshop.

background-blend-mode is similar but specifically blends a background-image with a background-color or with another background-image.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 40px;
    background: #1a1a2e;
    color: white;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 40px;
  }

  .gallery .item {
    text-align: center;
  }

  .gallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    transition: filter 0.3s;
  }

  .gallery .label {
    margin-top: 8px;
    font-size: 0.85em;
    color: #aaa;
  }

  .blur { filter: blur(3px); }
  .brightness { filter: brightness(1.5); }
  .contrast { filter: contrast(1.8); }
  .grayscale { filter: grayscale(100%); }
  .hue-rotate { filter: hue-rotate(180deg); }
  .invert { filter: invert(100%); }
  .saturate { filter: saturate(2); }
  .sepia { filter: sepia(100%); }
  .drop-shadow { filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5)); }

  .hover-filter img:hover {
    filter: grayscale(100%) brightness(0.7);
  }

  .frosted-glass {
    position: relative;
    width: 400px;
    height: 250px;
    margin: 30px auto;
    background: url('https://picsum.photos/800/500?random=10') center/cover;
    border-radius: 16px;
    overflow: hidden;
  }

  .frosted-glass .overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    text-align: center;
    padding: 20px;
  }

  .frosted-glass .overlay h3 {
    margin: 0 0 10px;
    font-size: 1.5em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }

  .frosted-glass .overlay p {
    margin: 0;
    font-size: 0.95em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }

  .blend-examples {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 30px auto;
  }

  .blend-box {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    font-size: 0.75em;
    color: white;
    font-weight: bold;
  }

  .blend-box .bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
  }

  .blend-box .fg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #f093fb, #f5576c);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .blend-normal { mix-blend-mode: normal; }
  .blend-multiply { mix-blend-mode: multiply; }
  .blend-screen { mix-blend-mode: screen; }
  .blend-overlay { mix-blend-mode: overlay; }
  .blend-darken { mix-blend-mode: darken; }
  .blend-lighten { mix-blend-mode: lighten; }

  .bg-blend {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    background:
      linear-gradient(45deg, #ff6b6b, #4ecdc4),
      url('https://picsum.photos/400/400?random=11');
    background-size: cover;
    background-blend-mode: multiply;
    border-radius: 12px;
  }
</style>
</head>
<body>
  <h2>CSS Filters</h2>
  <div class="gallery">
    <div class="item">
      <img src="https://picsum.photos/400/300?random=1" alt="Original">
      <div class="label">Original</div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/300?random=2" alt="Blur" class="blur">
      <div class="label">blur(3px)</div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/300?random=3" alt="Brightness" class="brightness">
      <div class="label">brightness(1.5)</div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/300?random=4" alt="Contrast" class="contrast">
      <div class="label">contrast(1.8)</div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/300?random=5" alt="Grayscale" class="grayscale">
      <div class="label">grayscale(100%)</div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/300?random=6" alt="Hue Rotate" class="hue-rotate">
      <div class="label">hue-rotate(180deg)</div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/300?random=7" alt="Invert" class="invert">
      <div class="label">invert(100%)</div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/300?random=8" alt="Sepia" class="sepia">
      <div class="label">sepia(100%)</div>
    </div>
  </div>

  <h2>Frosted Glass (Glassmorphism)</h2>
  <div class="frosted-glass">
    <div class="overlay">
      <h3>Glassmorphism</h3>
      <p>Frosted glass effect with backdrop-filter blur</p>
    </div>
  </div>

  <h2>Mix Blend Mode</h2>
  <div class="blend-examples">
    <div class="blend-box blend-normal">
      <div class="bg"></div>
      <div class="fg">Normal</div>
    </div>
    <div class="blend-box blend-multiply">
      <div class="bg"></div>
      <div class="fg">Multiply</div>
    </div>
    <div class="blend-box blend-screen">
      <div class="bg"></div>
      <div class="fg">Screen</div>
    </div>
    <div class="blend-box blend-overlay">
      <div class="bg"></div>
      <div class="fg">Overlay</div>
    </div>
  </div>

  <h2>Background Blend Mode</h2>
  <div class="bg-blend"></div>
</body>
</html>

Code Explanation

Filter functions:
- blur(): Blurs the element. The value in px determines the amount of blur.
- brightness(): Adjusts brightness. 100% = normal, >100% = brighter, <100% = darker.
- contrast(): Adjusts contrast. 100% = normal.
- grayscale(): Converts to grayscale. 100% = fully gray.
- hue-rotate(): Rotates the color hue in degrees.
- invert(): Inverts the colors. 100% = perfectly inverted colors.
- saturate(): Adjusts color saturation.
- sepia(): Applies a sepia effect (yellowish brown).
- drop-shadow(): Adds a shadow that follows the shape of the element.

backdrop-filter: Applies a filter to the area behind the element. blur(12px) blurs the area behind, creating a frosted glass effect.

mix-blend-mode: Blends an element's colors with the elements behind it. multiply darkens, screen lightens, overlay combines both.

background-blend-mode: Blends multiple backgrounds on the same element. Useful for combining a gradient with an image.

Everyday Use Cases

Image hover effect: Use grayscale or brightness on hover to give visual feedback when the user moves the cursor over an image.

Frosted glass navbar: Apply backdrop-filter: blur() to a navbar for the modern effect popular on contemporary websites.

Card overlay: Use mix-blend-mode: multiply on a card overlay to create a unique color effect.

Hero image: Combine background-blend-mode with a gradient to make a hero image more dramatic.

Conclusion

Filters and blend modes provide powerful visual control directly in CSS. Filter works on the element itself, backdrop-filter works on the area behind the element, mix-blend-mode blends an element with its context, and background-blend-mode blends multiple backgrounds. Combining these four techniques can produce stunning visual effects without needing image editing software.