coding help
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:

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

Result:

WINDOWS XP OMG

Coding: 

<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

Result:

WINDOWS XP OMG

Coding: 

<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>