Blend Modes

Tetapkan mod campuran

Sintaks

visual="mix-blend:[value]"

Nilai

Nilai	CSS Output	Huraian
normal	mix-blend-mode: normal	Campuran normal
multiply	mix-blend-mode: multiply	Campuran darab
screen	mix-blend-mode: screen	Campuran skrin
overlay	mix-blend-mode: overlay	Campuran tindanan
darken	mix-blend-mode: darken	Campuran gelap
lighten	mix-blend-mode: lighten	Campuran cerah

Contoh

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

Pratonton

Mod Campuran

visual="mix-blend:multiply" - Campurkan elemen dengan kandungan di belakangnya

multiply

screen

Lihat Kod

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