Mix Blend Mode

vel-src: effects.css

Utilities for controlling how an element's content blends with its background.

Class	Properties
vel-mix-normal	mix-blend-mode: normal
vel-mix-multiply	mix-blend-mode: multiply
vel-mix-screen	mix-blend-mode: screen
vel-mix-overlay	mix-blend-mode: overlay
vel-mix-darken	mix-blend-mode: darken
vel-mix-lighten	mix-blend-mode: lighten
vel-mix-color-dodge	mix-blend-mode: color-dodge
vel-mix-color-burn	mix-blend-mode: color-burn
vel-mix-hard-light	mix-blend-mode: hard-light
vel-mix-soft-light	mix-blend-mode: soft-light
vel-mix-difference	mix-blend-mode: difference
vel-mix-exclusion	mix-blend-mode: exclusion

Examples

Blend modes on overlapping elements

screen

multiply

difference

overlay

example.html

<div style="display:flex;gap:16px;padding:1rem;background:#060b17;flex-wrap:wrap;">
  <div style="position:relative;width:80px;height:80px;text-align:center;">
    <div style="position:absolute;width:60px;height:60px;border-radius:50%;background:#7c5cfc;top:0;left:0;"></div>
    <div class="vel-mix-screen" style="position:absolute;width:60px;height:60px;border-radius:50%;background:#38bdf8;top:20px;left:20px;"></div>
    <p style="position:absolute;bottom:-20px;left:0;right:0;color:#64748b;font-size:0.65rem;">screen</p>
  </div>
  <div style="position:relative;width:80px;height:80px;text-align:center;">
    <div style="position:absolute;width:60px;height:60px;border-radius:50%;background:#7c5cfc;top:0;left:0;"></div>
    <div class="vel-mix-multiply" style="position:absolute;width:60px;height:60px;border-radius:50%;background:#f97316;top:20px;left:20px;"></div>
    <p style="position:absolute;bottom:-20px;left:0;right:0;color:#64748b;font-size:0.65rem;">multiply</p>
  </div>
  <div style="position:relative;width:80px;height:80px;text-align:center;">
    <div style="position:absolute;width:60px;height:60px;border-radius:50%;background:#7c5cfc;top:0;left:0;"></div>
    <div class="vel-mix-difference" style="position:absolute;width:60px;height:60px;border-radius:50%;background:#34d399;top:20px;left:20px;"></div>
    <p style="position:absolute;bottom:-20px;left:0;right:0;color:#64748b;font-size:0.65rem;">difference</p>
  </div>
  <div style="position:relative;width:80px;height:80px;text-align:center;">
    <div style="position:absolute;width:60px;height:60px;border-radius:50%;background:#7c5cfc;top:0;left:0;"></div>
    <div class="vel-mix-overlay" style="position:absolute;width:60px;height:60px;border-radius:50%;background:#ec4899;top:20px;left:20px;"></div>
    <p style="position:absolute;bottom:-20px;left:0;right:0;color:#64748b;font-size:0.65rem;">overlay</p>
  </div>
</div>