Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Blends element with content behind it
Blends multiple backgrounds together
normalDefault - no blending
multiplyMultiplies colors (darker)
screenInverts, multiplies, inverts (lighter)
overlayMultiply + Screen combined
darkenKeeps darkest color
lightenKeeps lightest color
color-dodgeBrightens background
color-burnDarkens background
hard-lightMultiply or screen based on blend
soft-lightSofter version of hard-light
differenceSubtracts colors
exclusionSimilar to difference, lower contrast
hueUses hue of blend color
saturationUses saturation of blend color
colorUses hue and saturation
luminosityUses luminosity of blend color
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🎨 CSS Blend Modes</h1>
<div class="grid">
<div class="blend-box normal">
<div class="blend-overlay"></div>
<div class="label">normal</div>
</div>
<div class="blend-box multiply">
<div class="blend-overlay"></div>
<div class="label">multiply</div>
</div>
<div class="blend-box screen">
<div class="blend-overlay"></div>
<div class="label">screen</div>
</div>
<div class="blend-box overlay">
<div class="blend-overlay"></div>
<div class="label">overlay</div>
</div>
<div class="blend-box darken">
<div class="blend-overlay"></div>
<div class="label">darken</div>
</div>
<div class="blend-box lighten">
<div class="blend-overlay"></div>
<div class="label">lighten</div>
</div>
<div class="blend-box color-dodge">
<div class="blend-overlay"></div>
<div class="label">color-dodge</div>
</div>
<div class="blend-box color-burn">
<div class="blend-overlay"></div>
<div class="label">color-burn</div>
</div>
<div class="blend-box hard-light">
<div class="blend-overlay"></div>
<div class="label">hard-light</div>
</div>
<div class="blend-box soft-light">
<div class="blend-overlay"></div>
<div class="label">soft-light</div>
</div>
<div class="blend-box difference">
<div class="blend-overlay"></div>
<div class="label">difference</div>
</div>
<div class="blend-box exclusion">
<div class="blend-overlay"></div>
<div class="label">exclusion</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
Make text readable on any background
.text { mix-blend-mode: multiply; }Create Instagram-style color effects
.image { mix-blend-mode: color; }Blend gradients with images
background-blend-mode: overlay;Logo adapts to any background
.logo { mix-blend-mode: multiply; }Use isolation: isolate to create a new stacking context and prevent blend modes from affecting parent elements.
.container {
isolation: isolate; /* Creates boundary */
}
.blend-element {
mix-blend-mode: multiply; /* Only affects siblings */
}