ContextQMD
Back to Tailwindcss

Background Blend Mode

src/docs/background-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";

export const title = "background-blend-mode"; export const description = "Utilities for controlling how an element's background image should blend with its background color.";

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

Examples

Basic example

Use utilities like bg-blend-difference and bg-blend-saturation to control how the background image and color of an element are blended:

<Figure> <Example> { <div className="flex flex-col items-center justify-between gap-y-6 px-1 sm:flex-row md:px-4"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> bg-blend-multiply </p> <div className="size-24 bg-blue-500 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat bg-blend-multiply md:size-32"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> bg-blend-soft-light </p> <div className="size-24 bg-blue-500 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat bg-blend-soft-light md:size-32"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> bg-blend-overlay </p> <div className="size-24 bg-blue-500 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat bg-blend-overlay md:size-32"></div> </div> </div> } </Example>
html
<!-- [!code classes:bg-blend-multiply,bg-blend-soft-light,bg-blend-overlay] -->
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-multiply ..."></div>
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-soft-light ..."></div>
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-overlay ..."></div>
</Figure>

Responsive design

<ResponsiveDesign property="background-blend-mode" defaultClass="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-lighten" featuredClass="bg-blend-darken" />