Interactive Blend Editor
Interactive Controls
Live Preview
Generated CSS Code
.base {
background-color: #3b82f6;
}
.blend {
background-color: #fbbf24;
mix-blend-mode: multiply;
opacity: 1;
}Learn how to create an interactive editor for experimenting with blend modes, colors, and opacity.
const [baseColor, setBaseColor] = useState('#3b82f6');
const [blendColor, setBlendColor] = useState('#fbbf24');
const [blendMode, setBlendMode] = useState('multiply');
<div style={{ backgroundColor: baseColor }}>
<div style={{ backgroundColor: blendColor, mixBlendMode: blendMode }} />
</div>.base {
background-color: #3b82f6;
}
.blend {
background-color: #fbbf24;
mix-blend-mode: multiply;
opacity: 1;
}