← All elements
<div class="df"><h2>BLEND</h2><i></i></div>About this animation
Text that inverts against a moving stripe using mix-blend-mode: difference, so it stays readable on any colour.
How it works
The text is white with mix-blend-mode: difference, which subtracts its colour from whatever is behind it. Over the dark background it stays white, and over the yellow stripe it turns dark blue, so the word is always readable. The stripe slides across the box on a loop to show the effect.
Ways to customise it
- Change the stripe colour to see different inverted colours.
- Edit the text and font size.
- Move the stripe by editing the animation range.
Good to know
Blend modes are supported everywhere current. Contrast changes as the stripe moves, so test the worst case if you use this for important text.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.