Intermediate LevelCSS & Modern Layouts
How do CSS blend modes (mix-blend-mode, background-blend-mode) work?
❓ Interview Prompt: Explain blend mode types and practical use cases for overlaying text, images, and gradients.
CSS blend modes control how element colors mix with the colors behind them:
Two Properties:
•
`mix-blend-mode`: Blends an element with everything visually behind it (including parent background and siblings).
•
`background-blend-mode`: Blends multiple backgrounds within the same element.
Common Blend Modes:
•
multiply: Darkens (overlapping colors become darker). Great for text over images.•
screen: Lightens (opposite of multiply).•
overlay: Combines multiply and screen for contrast enhancement.•
difference: Creates inverted/negative effects.•
color: Applies hue/saturation of the blend color while keeping luminosity.Code Implementation Example
css
/* Duotone image effect */
.duotone {
background:
linear-gradient(#3d2c2e, #886f68),
url('/photo.jpg') center/cover;
background-blend-mode: color;
}
/* Text that adapts to any background */
.adaptive-text {
color: white;
mix-blend-mode: difference;
}💡Duotone photo effect and adaptive text using blend modes.
🎯 Interview Key Takeaway
Use background-blend-mode for duotone image effects and mix-blend-mode for text that adapts to varying backgrounds.
#Blend Modes#Effects#Images#Intermediate
Back to all CSS & Modern Layouts Questions→