HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS mix-blend-mode Comparison</title>
  <style>
    body { font-family: sans-serif; padding: 1.5rem; background: #f8fafc; }
    .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .tile {
      min-height: 5rem;
      border-radius: 0.5rem;
      background: linear-gradient(135deg, #7c3aed, #2563eb);
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 700;
      font-size: 0.85rem;
    }
    .difference { mix-blend-mode: difference; }
    .multiply { mix-blend-mode: multiply; background: #facc15; padding: 0.75rem 1rem; border-radius: 0.35rem; }
    .screen { mix-blend-mode: screen; background: #0f172a; padding: 0.75rem 1rem; border-radius: 0.35rem; }
  </style>
</head>
<body>
  <h1>Compare mix-blend-mode</h1>
  <div class="row">
    <div class="tile"><span>normal</span></div>
    <div class="tile"><span class="difference">difference</span></div>
    <div class="tile"><span class="multiply">multiply</span></div>
    <div class="tile"><span class="screen">screen</span></div>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS mix-blend-mode Property - Compare Modes