A summary of this page:
Blend modes can be activated using ! style="mix-blend-mode:?; background:?;" on cells for parts of a template overlay.

Blend Modes are color mixing techniques that are designed to make the table cells appear differently with a color overlay being used such as brightening or darkening regardless of the color value being set while blending is active. These were developed by Rik Cabanier and their team.


Blend modes can be done on the table cells on the following codes whenever a color frame is being made with a desired color.


! style="background:#A0FF00; color:white; mix-blend-mode:color-dodge"

Color Dodge

! style="background:#0AF; color:white; mix-blend-mode:difference"


! style="background:#4BFF00; color:white; mix-blend-mode:luminosity"


! style="background:#00FF00; color:black; mix-blend-mode:screen"


! style="background:#5F5F5F; color:white; mix-blend-mode:color-burn"

Color Burn

! style="background:#B400FF; color:white; mix-blend-mode:hue"



You can activate blending using a desired mode you wish to use aside from normal. When activated on a certain mode, it will take effect depending on which mode you've selected. This can also be done for other elemetns including text and images on the background by using this code:

<div style="background:?">
<span style="mix-blend-mode:?">TEXT</span>

Which results this example:


List of modesEdit

These are the available blend modes that were made for css as well as the style div container:[1]

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • normal (default)
  • overlay
  • saturation
  • screen
  • soft-light


  • Some of them can make the appearance of the text hard to see on a certain color you chose. When activating them, be sure you set the color to where it can be viewed without harsh display.
  • The blend modes may only work on certain browsers as some of them don't have them implemented yet.[2]
  • Blend modes can blend other objects alone only for CSS without any need for background before activation of this. An example of that includes the FANDOM toolbar below the page.
  • If an element has it active, the selection highlights are blended into.


Community content is available under CC-BY-SA unless otherwise noted.