index.html

--- layout: single property_name: mix-blend-mode ---<section id="mix-blend-mode" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/mix-blend-mode/" data-property-name="mix-blend-mode" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="mix-blend-mode">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/mix-blend-mode" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#mix-blend-mode"><span>#</span>mix-blend-mode</a></h2><div class="property-description"><p>Defines how the element should <strong>blend</strong> with the background.</p></div></header><style type="text/css">.mix-blend-mode { background: #310736;display: flex;padding: 1em; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: normal;">mix-blend-mode: normal;</code></p><div class="example-description"><p>The element does <strong>not</strong> blend.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-normal"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: multiply;">mix-blend-mode: multiply;</code></p><div class="example-description"><p>The element uses the <strong>multiply</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-multiply"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-multiply .block { mix-blend-mode: multiply; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: screen;">mix-blend-mode: screen;</code></p><div class="example-description"><p>The element uses the <strong>screen</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-screen"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-screen .block { mix-blend-mode: screen; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: overlay;">mix-blend-mode: overlay;</code></p><div class="example-description"><p>The element uses the <strong>overlay</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-overlay"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-overlay .block { mix-blend-mode: overlay; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: darken;">mix-blend-mode: darken;</code></p><div class="example-description"><p>The element uses the <strong>darken</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-darken"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-darken .block { mix-blend-mode: darken; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: lighten;">mix-blend-mode: lighten;</code></p><div class="example-description"><p>The element uses the <strong>lighten</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-lighten"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-lighten .block { mix-blend-mode: lighten; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: color-dodge;">mix-blend-mode: color-dodge;</code></p><div class="example-description"><p>The element uses the <strong>color-dodge</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-color-dodge"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-color-dodge .block { mix-blend-mode: color-dodge; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: color-burn;">mix-blend-mode: color-burn;</code></p><div class="example-description"><p>The element uses the <strong>color-burn</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-color-burn"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-color-burn .block { mix-blend-mode: color-burn; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: hard-light;">mix-blend-mode: hard-light;</code></p><div class="example-description"><p>The element uses the <strong>hard-light</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-hard-light"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-hard-light .block { mix-blend-mode: hard-light; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: soft-light;">mix-blend-mode: soft-light;</code></p><div class="example-description"><p>The element uses the <strong>soft-light</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-soft-light"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-soft-light .block { mix-blend-mode: soft-light; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: difference;">mix-blend-mode: difference;</code></p><div class="example-description"><p>The element uses the <strong>difference</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-difference"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-difference .block { mix-blend-mode: difference; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: exclusion;">mix-blend-mode: exclusion;</code></p><div class="example-description"><p>The element uses the <strong>exclusion</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-exclusion"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-exclusion .block { mix-blend-mode: exclusion; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: hue;">mix-blend-mode: hue;</code></p><div class="example-description"><p>The element uses the <strong>hue</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-hue"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-hue .block { mix-blend-mode: hue; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: saturation;">mix-blend-mode: saturation;</code></p><div class="example-description"><p>The element uses the <strong>saturation</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-saturation"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-saturation .block { mix-blend-mode: saturation; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: color;">mix-blend-mode: color;</code></p><div class="example-description"><p>The element uses the <strong>color</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-color"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-color .block { mix-blend-mode: color; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: luminosity;">mix-blend-mode: luminosity;</code></p><div class="example-description"><p>The element uses the <strong>luminosity</strong> blend mode.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div mix-blend-mode" id="mix-blend-mode-luminosity"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div></div></aside><style type="text/css">#mix-blend-mode-luminosity .block { mix-blend-mode: luminosity; }</style></section></section>