CSS Filters & Blend Modes — Photoshop Effects in the Browser

img { filter: grayscale(100%); transition: filter .3s; }
img:hover { filter: grayscale(0); }        /* color-on-hover gallery */

filter: blur(4px);
filter: brightness(1.2) contrast(1.1) saturate(1.3);  /* "instagram" tune */
filter: sepia(60%) hue-rotate(180deg);
filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));  /* follows PNG/SVG shape,
                                                   unlike box-shadow's rectangle */

/* duotone: solid color + image + blend */
.duotone { background: #6d6ffb; }
.duotone img { mix-blend-mode: luminosity; opacity: .9; }

/* text that inverts over anything behind it */
h1 { color: #fff; mix-blend-mode: difference; }

/* texture overlays */
.overlay { background-blend-mode: multiply; }