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.

Overview [sr-only]

ClassDeclarations
mix-blend-mode:mode / 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 in different states using selectors, media queries, etc.

<div class="blend:normal:hover blend:normal@sm blend:normal@dark blend:normal@print"></div>
PREVIOUS
Mask Image

Style syntax for setting the image that is used as mask layer for an element.

NEXT
Flex

Style syntax for setting how flex items grow or shrink.

MIT License © Aoyue Design LLC.