---
title: "Blend Difference"
description: "Auto-inverting captions using mix-blend-mode: difference — text flips between white and black per-pixel against the background"
---

# Blend Difference

Auto-inverting captions using mix-blend-mode: difference — text flips between white and black per-pixel against the background

`text` `effect` `blend-mode` `contrast` `inversion`

## Install

<CodeGroup>

```bash Terminal
npx hyperframes add caption-blend-difference
```

</CodeGroup>

## How It Works

White text with `mix-blend-mode: difference` inverts per-pixel against whatever is behind it:

- **Dark background** → text stays white
- **Light background** → text flips to black
- **Color background** → text becomes the complement (blue → orange, red → cyan)

The composition root needs `isolation: isolate` so the blend operates against sibling content (video, images) rather than the page background.

## Variants

| Class | Blend Mode | Effect |
| --- | --- | --- |
| `.blend-difference` | `difference` | Hard per-pixel inversion — maximum contrast |
| `.blend-difference-soft` | `exclusion` | Softer inversion — less harsh on midtones |
| `.blend-difference-screen` | `screen` | Text glows on dark areas, fades on light |

## Example

```html
<div data-composition-id="root" style="isolation: isolate;">
  <video src="video.mp4" muted playsinline
         data-start="0" data-duration="30" data-track-index="0" />

  <div class="clip blend-difference"
       data-start="0" data-duration="5" data-track-index="1"
       style="position: absolute; inset: 0; z-index: 10;
              display: flex; align-items: center; justify-content: center;">
    <span style="font-size: 120px; font-weight: 800;">
      YOUR CAPTION
    </span>
  </div>
</div>
```

## CSS Custom Properties

| Property | Default | Description |
| --- | --- | --- |
| `--blend-caption-color` | `white` | Base text color before blending |
| `--blend-mode` | `difference` | Override blend mode on `.blend-difference` |

## Details

| Property | Value |
| --- | --- |
| Type | Component |

## Files

| File | Target | Type |
| --- | --- | --- |
| `caption-blend-difference.html` | `compositions/components/caption-blend-difference.html` | hyperframes:snippet |

## Usage

Open `compositions/components/caption-blend-difference.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.