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.

Overview

ClassDeclarations
blend:modemix-blend-mode: mode;
blend:normalmix-blend-mode: normal;
blend:multiplymix-blend-mode: multiply;
blend:screenmix-blend-mode: screen;
blend:overlaymix-blend-mode: overlay;
blend:darkenmix-blend-mode: darken;
blend:lightenmix-blend-mode: lighten;
blend:color-dodgemix-blend-mode: color-dodge;
blend:color-burnmix-blend-mode: color-burn;
blend:hard-lightmix-blend-mode: hard-light;
blend:soft-lightmix-blend-mode: soft-light;
blend:differencemix-blend-mode: difference;
blend:exclusionmix-blend-mode: exclusion;
blend:huemix-blend-mode: hue;
blend:saturationmix-blend-mode: saturation;
blend:colormix-blend-mode: color;
blend:luminositymix-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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.