Layers (bottom → top)
No layers yet. Click + Add Layer to start stacking!
Generated CSS
No layers yet. Click + Add Layer to start stacking!
CSS blend modes are one of the most creative yet least understood features in web design. Tools like Photoshop have had them for decades, but most web developers never experiment with mix-blend-mode or background-blend-mode because there's no intuitive way to see how they work in real time. Blenda fills that gap.
Blenda is a layer-based CSS blend mode composer. Stack multiple colored layers on top of each other, assign different blend modes to each one, and watch them merge into unexpected visual compositions. Each layer has its own color, opacity, blend mode, and background pattern — giving you fine-grained control over the final output. When you're happy with the result, export production-ready CSS code.
Each layer is an absolutely positioned <div> that fills the preview area. The mix-blend-mode CSS property tells the browser how to composite that layer with everything beneath it. The preview canvas uses isolation: isolate to create a new stacking context, so blend modes only apply within the composition. Background patterns are rendered using CSS radial-gradient and conic-gradient functions.