Effect

Mix Blend Mode

Style syntax for setting how an element's content should blend with its parent background.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`mix-blend-mode:mode` `/` `blend:mode`	`mix-blend-mode: mode`
`blend:normal`	`mix-blend-mode: normal`
`blend:multiply`	`mix-blend-mode: multiply`
`blend:screen`	`mix-blend-mode: screen`
`blend:overlay`	`mix-blend-mode: overlay`
`blend:darken`	`mix-blend-mode: darken`
`blend:lighten`	`mix-blend-mode: lighten`
`blend:color-dodge`	`mix-blend-mode: color-dodge`
`blend:color-burn`	`mix-blend-mode: color-burn`
`blend:hard-light`	`mix-blend-mode: hard-light`
`blend:soft-light`	`mix-blend-mode: soft-light`
`blend:difference`	`mix-blend-mode: difference`
`blend:exclusion`	`mix-blend-mode: exclusion`
`blend:hue`	`mix-blend-mode: hue`
`blend:saturation`	`mix-blend-mode: saturation`
`blend:color`	`mix-blend-mode: color`
`blend:luminosity`	`mix-blend-mode: luminosity`

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="blend:normal:hover blend:normal@sm blend:normal@dark blend:normal@print">…</div>