Upload your image, choose your background color, and preview the effect of blending the background image with the color using the background-blend-mode property.
Click on the thumbnails to see a larger preview of an effect.
Clicking the text icon will allow you to add text to the preview image, and blend it with the background using the mix-blend-mode property.
If your browser does not support a property, no effect will be applied to the background and text, correspondingly.
Read the article: Compositing And Blending In CSS.
This interactive demo is a demo for the article: Compositing and Blending In CSS.
The image you upload will be blended with the background color of your choice using the background-blend-mode property. So, make sure you are viewing and using this demo in a browser that supports this property. If your browser does not support it, no blending will be applied.
You can choose the background color to blend with using the color icon at the top right corner of the screen. (The drop icon [], next to the upload icon.) The thumbnails and previews will update live as you pick your color.
By clicking the text icon ([]), you can toggle a piece of editable text that you can also style by giving it a background and foreground color. Then, using one of the blend mode values in the dropdown you get, you can blend this text with the image in the preview panel. The blending is done using the mix-blend-mode property.
If your browser does not support the mix-blend-mode property, the text will not blend. So, make sure you use this feature in a browser that supports the property.
For more information about compositing and blending in CSS, refer to the article.