ContextQMD
Back to Tailwindcss

Mix Blend Mode

src/docs/mix-blend-mode.mdx

latest3.7 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "mix-blend-mode"; export const description = "Utilities for controlling how an element should blend with the background.";

<ApiTable rows={[ ["mix-blend-normal", "mix-blend-mode: normal;"], ["mix-blend-multiply", "mix-blend-mode: multiply;"], ["mix-blend-screen", "mix-blend-mode: screen;"], ["mix-blend-overlay", "mix-blend-mode: overlay;"], ["mix-blend-darken", "mix-blend-mode: darken;"], ["mix-blend-lighten", "mix-blend-mode: lighten;"], ["mix-blend-color-dodge", "mix-blend-mode: color-dodge;"], ["mix-blend-color-burn", "mix-blend-mode: color-burn;"], ["mix-blend-hard-light", "mix-blend-mode: hard-light;"], ["mix-blend-soft-light", "mix-blend-mode: soft-light;"], ["mix-blend-difference", "mix-blend-mode: difference;"], ["mix-blend-exclusion", "mix-blend-mode: exclusion;"], ["mix-blend-hue", "mix-blend-mode: hue;"], ["mix-blend-saturation", "mix-blend-mode: saturation;"], ["mix-blend-color", "mix-blend-mode: color;"], ["mix-blend-luminosity", "mix-blend-mode: luminosity;"], ["mix-blend-plus-darker", "mix-blend-mode: plus-darker;"], ["mix-blend-plus-lighter", "mix-blend-mode: plus-lighter;"], ]} />

Examples

Basic example

Use utilities like mix-blend-overlay and mix-blend-soft-light to control how an element's content and background is blended with other content in the same stacking context:

<Figure> <Example> { <div className="grid grid-cols-1 py-4"> <div className="col-start-1 row-start-1 flex justify-center -space-x-14"> <div className="size-32 rounded-full bg-blue-500 mix-blend-multiply"></div> <div className="size-32 rounded-full bg-pink-500 mix-blend-multiply"></div> </div> </div> } </Example>
html
<!-- [!code classes:mix-blend-multiply] -->
<div class="flex justify-center -space-x-14">
  <div class="bg-blue-500 mix-blend-multiply ..."></div>
  <div class="bg-pink-500 mix-blend-multiply ..."></div>
</div>
</Figure>

Isolating blending

Use the isolate utility on the parent element to create a new stacking context and prevent blending with content behind it:

<Figure> <Example padding={false}> { <div className="grid grid-cols-1"> <Stripes className="col-start-1 row-start-1" /> <div className="col-start-1 row-start-1 grid grid-cols-2 px-0 py-12 sm:px-16"> <div className="isolate flex justify-center -space-x-14"> <div className="size-24 rounded-full bg-yellow-500 mix-blend-multiply"></div> <div className="size-24 rounded-full bg-green-500 mix-blend-multiply"></div> </div> <div className="flex justify-center -space-x-14"> <div className="size-24 rounded-full bg-yellow-500 mix-blend-multiply"></div> <div className="size-24 rounded-full bg-green-500 mix-blend-multiply"></div> </div> </div> </div> } </Example>
html
<!-- [!code classes:mix-blend-multiply,isolate] -->
<div class="isolate flex justify-center -space-x-14">
  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
  <div class="bg-green-500 mix-blend-multiply ..."></div>
</div>

<div class="flex justify-center -space-x-14">
  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
  <div class="bg-green-500 mix-blend-multiply ..."></div>
</div>
</Figure>

Responsive design

<ResponsiveDesign property="mix-blend-mode" defaultClass="mix-blend-multiply" featuredClass="mix-blend-overlay" />