Syntax

Mix Blend Mode

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
`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 based on different states using selectors and applying conditionally.

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

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.