CSS Blend Modes Preview Tool

Experiment with different CSS blend modes to see how they interact with backgrounds and images. Upload your own images or use the color pickers to customize the preview.

Controls

Blend Mode

Blend Layer Opacity: 50%

Background Layer

📁

Upload Background Image

Blend Layer

📁

Upload Blend Image

Quick Presets

Preview

Background Layer

.blend-element {
    background-color: #ff0000;
    mix-blend-mode: multiply;
    opacity: 0.5;
}

Multiply blend mode darkens the base color based on the blend color. White becomes transparent, black remains black.