Blend Modes

Set mix blend mode

Syntax

visual="mix-blend:[value]"

Values

Value	CSS Output	Description
normal	mix-blend-mode: normal	Normal blend
multiply	mix-blend-mode: multiply	Multiply blend
screen	mix-blend-mode: screen	Screen blend
overlay	mix-blend-mode: overlay	Overlay blend
darken	mix-blend-mode: darken	Darken blend
lighten	mix-blend-mode: lighten	Lighten blend

Examples

<div visual="mix-blend:multiply">Multiply blend</div>

Preview

Mix Blend Mode

visual="mix-blend:multiply" - Blend element with content behind it

multiply

screen

View Code

<div layout="flex" space="g:medium p:medium" visual="rounded:medium bg:gradient-red-orange">
  <div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:multiply">multiply</div>
  <div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:screen">screen</div>
</div>