Normalmente, para tener algunos efectos en imágenes o textos en la web, antes tenemos que pasar por algún software como Photoshop y así lograr nuestro objetivo, pero esto está cambiando a medida que CSS3 avanza, pues ya podemos ver efectos como los filtros, mascaras e incluso mezclas (tema que vamos a ver a continuación), esto es algo bastante normal ya que en la web igual se suele trabajar con vectores, imágenes, colores, textos, etc.

¿Qué es background-blend-mode?

La propiedad background-blend-mode en pocas palabras lo que hace es mezclar una imagen con algún color y dependiendo del valor, dicha imagen tenga un efecto, ¿Estás confundido?, el código te puede ayudar a entender …

¿Cómo usar background-blend-mode?

Para usar background-blend-mode hay varias maneras, una forma básica es usarla de la siguiente forma:

HTML
<div class="imagen"></div>  
CSS
imagen {  
   width: 640px; /* Ancho */
   height: 425px; /* Alto */
   background-image: url(imagen.jpg); /* Imagen */
   background-color: #0C94F5; /* Color */
   background-blend-mode: multiply; /* Efecto */
}

Solo con esas simples propiedades podemos empezar a usar múltiples efectos:

Multiply

background-color: #0C94F5;  
background-blend-mode: multiply;

multiply-1

Screen

background-color: #0C94F5;  
background-blend-mode: screen;

screen

Overlay

background-color: #0C94F5;  
background-blend-mode: overlay;

overlay

Darken

background-color: #0C94F5;  
background-blend-mode: darken;

darken

Lighten

background-color: #0C94F5;  
background-blend-mode: lighten;

lighten

Color-dodge

background-color: #0C94F5;  
background-blend-mode: color-dodge;

color-dodge

Color-burn

background-color: #0C94F5;  
background-blend-mode: color-burn;

color-burn

Hard-light

Una de mis mezclas favoritas.

background-color: #0C94F5;  
background-blend-mode: hard-light;

hard-light

Soft-light

background-color: #0C94F5;  
background-blend-mode: soft-light;

soft-light

Difference

Wooow!

background-color: #0C94F5;  
background-blend-mode: difference;

difference

Exclusion

background-color: #0C94F5;  
background-blend-mode: exclusion;

exclusion

Hue

Supongo que no todas las mezclas pueden salir bien.

background-color: #0C94F5;  
background-blend-mode: hue;

hue

Saturation

background-color: #0C94F5;  
background-blend-mode: saturation;

saturation

Color

background-color: #0C94F5;  
background-blend-mode: color;

color

Luminosity

background-color: #0C94F5;  
background-blend-mode: luminosity;

luminosity

También puedes usar degradados.

Hard-light con degradado

background-image: linear-gradient(to right, #0C94F5, #B234E9), url(imagen.jpg);  
background-blend-mode: hard-light;

gradient-hard-light

Difference con degradado

background-image: linear-gradient(to right, #6DC42A, #ED3A7E), url(imagen.jpg);  
background-blend-mode: difference;

gradient-difference

Woooooow!!!

Incluso puedes combinar dos imágenes (con o sin color):

background-image: url(imagen.jpg), url(imagen2.jpg);  
background-color: #0C94F5;  
background-blend-mode: hard-light;

two-hard-light

¿Bonito, no?, ahora imagina las múltiples cosas que puedes realizar con todas estas combinaciones, por cierto te dejo un ejemplo para que tu mismo veas lo increíble que es esta propiedad: