Blend Modes ​
Utilities for controlling how an element should blend with the background.
| Class Name | CSS Equivalent |
|---|---|
| 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; |
| blend-color-dodge | mix-blend-mode: color-dodge; |
| blend-color-burn | mix-blend-mode: color-burn; |
| blend-hard-light | mix-blend-mode: hard-light; |
| blend-soft-light | mix-blend-mode: soft-light; |
| blend-difference | mix-blend-mode: difference; |
| blend-exclusion | mix-blend-mode: exclusion; |
| blend-hue | mix-blend-mode: hue; |
| blend-saturation | mix-blend-mode: saturation; |
| blend-color | mix-blend-mode: color; |
| blend-luminosity | mix-blend-mode: luminosity; |
| blend-plus-lighter | mix-blend-mode: plus-lighter; |
Setting an element’s blend mode ​
Use the blend-{mode} utilities to control how an element’s content should be blended with the background.
html
<div class="[...] border-primary border-opacity-medium"></div>