Syntax

Background Blend Mode

Setting how an element's background images should blend with the background color.

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

Overview

ClassDeclarations
background-blend-mode:modebackground-blend-mode: mode;
background-blend-mode:normalbackground-blend-mode: normal;
background-blend-mode:multiplybackground-blend-mode: multiply;
background-blend-mode:screenbackground-blend-mode: screen;
background-blend-mode:overlaybackground-blend-mode: overlay;
background-blend-mode:darkenbackground-blend-mode: darken;
background-blend-mode:lightenbackground-blend-mode: lighten;
background-blend-mode:color-dodgebackground-blend-mode: color-dodge;
background-blend-mode:color-burnbackground-blend-mode: color-burn;
background-blend-mode:hard-lightbackground-blend-mode: hard-light;
background-blend-mode:soft-lightbackground-blend-mode: soft-light;
background-blend-mode:differencebackground-blend-mode: difference;
background-blend-mode:exclusionbackground-blend-mode: exclusion;
background-blend-mode:huebackground-blend-mode: hue;
background-blend-mode:saturationbackground-blend-mode: saturation;
background-blend-mode:colorbackground-blend-mode: color;
background-blend-mode:luminositybackground-blend-mode: luminosity;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="background-blend-mode:normal:hover background-blend-mode:normal@sm background-blend-mode:normal@dark background-blend-mode:normal@print">…</div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.
MIT License