CSS <blend-mode> Data Type - Playground Example

<!DOCTYPE html><html><head><style type="text/css">:root {
    --card-radius: 12px;
    --card-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    --photo-url: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80');
}

* { box-sizing: border-box; }

body {
    margin: 32px;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    color: #0f172a;
}

.demo {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
}

h1 {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 600;
}

h2 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #334155;
}

/* mix-blend-mode demo */
.photo {
    width: 640px;
    height: 360px;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    background-image: var(--photo-url);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.swatches {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.swatch {
    width: 140px;
    height: 88px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(2,6,23,0.08);
    cursor: default;
    transition: transform 200ms ease;
}

.swatch:hover { transform: translateY(-6px); }

/* each swatch is placed on top of the photo to show mix-blend-mode */
.multiply,
.screen,
.overlay,
.difference { position: relative; margin-top: -140px; }

.multiply { background: #ef4444; mix-blend-mode: multiply; color: #fff; }
.screen   { background: #10b981; mix-blend-mode: screen; color: #052029; }
.overlay  { background: #f59e0b; mix-blend-mode: overlay; color: #102027; }
.difference { background: #3b82f6; mix-blend-mode: difference; color: #fff; }

/* background-blend-mode demo */
.bg-grid {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

.bg-card {
    flex: 1;
    min-width: 180px;
    height: 140px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: white;
    box-shadow: var(--card-shadow);
    text-transform: capitalize;
}

.bg-card.normal {
    background-image: linear-gradient(135deg, rgba(59,130,246,0.75), rgba(99,102,241,0.6)), var(--photo-url);
    background-size: cover;
    background-position: center;
    background-blend-mode: normal;
}

.bg-card.multiply-bg {
    background-image: linear-gradient(135deg, rgba(239,68,68,0.75), rgba(245,158,11,0.6)), var(--photo-url);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

.bg-card.overlay-bg {
    background-image: linear-gradient(135deg, rgba(16,185,129,0.75), rgba(59,130,246,0.5)), var(--photo-url);
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
}

/* responsive */
@media (max-width: 820px) {
    .photo { width: 100%; height: 220px; }
    .swatches { gap: 10px; }
    .swatch { width: 120px; height: 72px; }
    .bg-grid { flex-direction: column; }
}
</style></head><body><div class="demo">
    <h1>CSS <blend-mode> examples</h1>

    <section class="mix-examples">
        <h2>mix-blend-mode</h2>
        <div class="photo" role="img" aria-label="Sample photo used to demonstrate blend modes"></div>

        <div class="swatches">
            <div class="swatch multiply">Multiply</div>
            <div class="swatch screen">Screen</div>
            <div class="swatch overlay">Overlay</div>
            <div class="swatch difference">Difference</div>
        </div>
    </section>

    <section class="background-examples">
        <h2>background-blend-mode</h2>
        <div class="bg-grid">
            <div class="bg-card normal">normal</div>
            <div class="bg-card multiply-bg">multiply</div>
            <div class="bg-card overlay-bg">overlay</div>
        </div>
    </section>
</div></body></html>