Presets

Blend Mode

Darkens by multiplying colors

Blend Type

Blends element with background elements

Background Image

Foreground / Overlay

Advanced Options

Save / Load

Preview

All Blend Modes Comparison

Normal
Multiply
Screen
Overlay
Darken
Lighten
Color Dodge
Color Burn
Hard Light
Soft Light
Difference
Exclusion
Hue
Saturation
Color
Luminosity
CSS
/* Blend Mode: multiply */

.blend-container {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.blend-background {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400");
  background-size: cover;
  background-position: center;
}

.blend-overlay {
  position: absolute;
  inset: 0;
  background-color: #e74c3c;
  mix-blend-mode: multiply;
}
HTML
<div class="blend-container">
  <div class="blend-background"></div>
  <div class="blend-overlay"></div>
</div>

Blend Mode Reference

Darkening Modes
  • multiply - Multiplies colors, always darker
  • darken - Selects darker of two colors
  • color-burn - Darkens and increases contrast
Lightening Modes
  • screen - Inverse multiply, always lighter
  • lighten - Selects lighter of two colors
  • color-dodge - Brightens and decreases contrast
Contrast Modes
  • overlay - Multiply + screen based on base
  • hard-light - Like overlay but based on top
  • soft-light - Gentler version of hard-light
Component Modes
  • hue - Takes hue from top layer
  • saturation - Takes saturation from top
  • color - Takes hue + saturation from top
  • luminosity - Takes brightness from top

Rate this tool