Background Blend Mode

Set background blend mode

Syntax

visual="bg-blend:[value]"

Values

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

Examples

<div visual="bg-blend:multiply">Multiplied background</div>

Preview

Background Blend Mode

visual="bg-blend:multiply" - Blend backgrounds together

multiply

screen

overlay

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small">multiply</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">screen</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">overlay</div>
</div>