Background Blend Mode

background-blend-mode sets how an elements background images should blend in with other images and other background colors. This is an interactive playground that lets you play around with CSS values.

There are a lot of different options for blending backgrounds. The widget below lets you choose all of the possible values. Difference and exclusion modes lead to some pretty crazy looking stuff.

Background Blend

Here is a widget for adding a linear color gradient and a random background image.

Color

.item { background-image: linear-gradient(60deg, #A7D279 0%, #194D46 100%), url(https://unsplash.it/g/500/500?random); }

This is just for changing the background color using a transparent color.

Color

.item { background-image: url(https://unsplash.it/g/500/500?random); background-color: rgba(0, 0, 0, 0.5); }
HTML
CSS
Output