Blend Modes

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <span style="mix-blend-mode: multiply;">Text Goes Here</span>

## Introduction

**Blending** combines pixels of elements, resulting in the background being mixed from an item's source color.

Blend modes are used for creating effects including text and images.

## Image blending

For compositing image files on articles, i.e. galleries, like sprites as a glow effect, or darkening backgrounds (removing white space) on site-wide use, and you are the wiki administrator, use the following codes onto **MediaWiki:Common.css** (https://wiki-name.fandom.com/MediaWiki:Common.css replacing **wiki-name** with your wiki's name):

```
img [src\*="Filename.ext"]
{
 mix-blend-mode: multiply;
}

```

To set which images to be mixed with background, replace `Filename.ext` with the specific image on your wiki, and the type of blend mode from `multiply` with one of the following modes here.

If you do not have editing access to MediaWiki:Common.css, submit a request on an admin's message wall.

Applying the codes to your own common.css is not recommended, as it may falsify other user's experience of how the image appears on the page.

## Color Blending

Different combination types achieve certain effects of blending one item, lightening or darkening, onto another element. The code is as follows:

```
<span style="mix-blend-mode: multiply;">Text Goes Here</span>
```

The following blend modes are valid:

* color
* color-burn
* color-dodge
* darken
* difference
* exclusion
* hard-light
* hue
* luminosity
* multiply
* normal
* overlay
* plus-lighter (unavailable in `background-blend-mode`)
* saturation
* screen
* soft-light

### Darken

Result:

Text Goes Here

Coding:

```
<span style="mix-blend-mode: multiply;">Text Goes Here</span>
```

Result:

Text goes here

Coding:

```
<div style="background: white; color: black; mix-blend-mode: multiply;">Text goes here</div>
```

Result:

Text goes here

Coding:

```
<div style="background: white; color: black; mix-blend-mode: color-burn;">Text goes here</div>
```

### Lighten

#### Text

Result:

Text goes here

Coding:

```
<div style="background: green; color: white;"><span style="mix-blend-mode: color-dodge;">Text goes here</span></div>
```

Result:

Text goes here

Coding:

```
<div style="background: black; color: white; mix-blend-mode: screen;">Text goes here</div>
```

Result:

Text goes here

Coding:

```
<div style="background: linear-gradient(to right, black, white); color: white; mix-blend-mode: screen;">Text goes here</div>
```

Result:

Text goes here

Coding:

```
<span style="color: white; mix-blend-mode: plus-lighter;">Text goes here</span>
```

Result:

Text goes here

Coding:

```
<div style="background: black; color: white; mix-blend-mode: plus-lighter;">Text goes here</div>
```

Result:

Text goes here

Coding:

```
<div style="background: linear-gradient(to right, black, white); color: white; mix-blend-mode: plus-lighter;">Text goes here</div>
```

Result:

Text goes here

Coding:

```
<div style="background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red); color: black; mix-blend-mode: plus-lighter;">Text goes here</div>
```

#### Images

```
<span style="mix-blend-mode: plus-lighter;">[[File:WINDOWS XP OMG.jpg|300px|left]]</span>
```

### Contrast

#### Text

Result:

Text goes here

Coding:

```
<div style="background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red); color: black; mix-blend-mode: overlay;">Text goes here</div>
```

Result:

Text goes here

Coding:

```
<div style="background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red); color: soft-light; mix-blend-mode: overlay;">Text goes here</div>
```

Result:

Text goes here

Coding:

```
<div style="background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red); color: hard-light; mix-blend-mode: overlay;">Text goes here</div>
```

#### Images

```
<span style="mix-blend-mode: overlay;">[[File:WINDOWS XP OMG.jpg|300px|left]]</span>
```

### Comparison

Result:

Text goes here

Coding:

```
<div style="background: black; color: white; mix-blend-mode: difference;">Text goes here</div>
```

Result:

Text goes here

Coding:

```
<div style="background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red); color: white; mix-blend-mode: difference;">Text goes here</div>
```

#### Color

Result:

Text goes here

Coding:

```
<div style="background: lime; color: red;"><span style="mix-blend-mode: hue;">Text goes here</span></div>
```

Result:

Text goes here

Coding:

```
<div style="background: lime; color: white;"><span style="mix-blend-mode: saturation;">Text goes here</span></div>
```

Result:

Text goes here

Coding:

```
<div style="background: blue; color: yellow;"><span style="mix-blend-mode: color;">Text goes here</span></div>
```

Result:

Text goes here

Coding:

```
<div style="background: blue; color: yellow;"><span style="mix-blend-mode: luminosity;">Text goes here</span></div>
```