Фон на чистом CSS c режимом смешивания background-blend-mode

Так как в Photoshop вы уже встречали режимы смешивания, сегодня вашему вниманию предлагаю пример создания фона на чистом CSS.

Смешивание реализовано благодаря свойству background-blend-mode.  Значения этого свойства точно такое же, как в графическом редакторе: lighten, multiply, hard-light и так далее.

CSS

HTML, BODY {
 height: 100%;
}

BODY {
 background-image: -webkit-gradient(linear, right bottom, left top, color-stop(-5%, violet), color-stop(5%, violet), color-stop(0%, teal), color-stop(10%, teal), color-stop(5%, steelblue), color-stop(15%, steelblue), color-stop(10%, skyblue), color-stop(20%, skyblue), color-stop(15%, yellowgreen), color-stop(25%, yellowgreen), color-stop(20%, yellow), color-stop(30%, yellow), color-stop(25%, gold), color-stop(35%, gold), color-stop(30%, orange), color-stop(40%, orange), color-stop(35%, crimson), color-stop(45%, crimson), color-stop(40%, purple), color-stop(50%, purple), color-stop(45%, violet), color-stop(55%, violet), color-stop(50%, teal), color-stop(60%, teal), color-stop(55%, steelblue), color-stop(65%, steelblue), color-stop(60%, skyblue), color-stop(70%, skyblue), color-stop(65%, yellowgreen), color-stop(75%, yellowgreen), color-stop(70%, yellow), color-stop(80%, yellow), color-stop(75%, gold), color-stop(85%, gold), color-stop(80%, orange), color-stop(90%, orange), color-stop(85%, crimson), color-stop(95%, crimson), color-stop(90%, purple), to(purple)), -webkit-gradient(linear, left bottom, right top, color-stop(-5%, violet), color-stop(5%, violet), color-stop(0%, teal), color-stop(10%, teal), color-stop(5%, steelblue), color-stop(15%, steelblue), color-stop(10%, skyblue), color-stop(20%, skyblue), color-stop(15%, yellowgreen), color-stop(25%, yellowgreen), color-stop(20%, yellow), color-stop(30%, yellow), color-stop(25%, gold), color-stop(35%, gold), color-stop(30%, orange), color-stop(40%, orange), color-stop(35%, crimson), color-stop(45%, crimson), color-stop(40%, purple), color-stop(50%, purple), color-stop(45%, violet), color-stop(55%, violet), color-stop(50%, teal), color-stop(60%, teal), color-stop(55%, steelblue), color-stop(65%, steelblue), color-stop(60%, skyblue), color-stop(70%, skyblue), color-stop(65%, yellowgreen), color-stop(75%, yellowgreen), color-stop(70%, yellow), color-stop(80%, yellow), color-stop(75%, gold), color-stop(85%, gold), color-stop(80%, orange), color-stop(90%, orange), color-stop(85%, crimson), color-stop(95%, crimson), color-stop(90%, purple), to(purple));
 background-image: -webkit-linear-gradient(right bottom, violet -5%, violet 5%, teal 0%, teal 10%, steelblue 5%, steelblue 15%, skyblue 10%, skyblue 20%, yellowgreen 15%, yellowgreen 25%, yellow 20%, yellow 30%, gold 25%, gold 35%, orange 30%, orange 40%, crimson 35%, crimson 45%, purple 40%, purple 50%, violet 45%, violet 55%, teal 50%, teal 60%, steelblue 55%, steelblue 65%, skyblue 60%, skyblue 70%, yellowgreen 65%, yellowgreen 75%, yellow 70%, yellow 80%, gold 75%, gold 85%, orange 80%, orange 90%, crimson 85%, crimson 95%, purple 90%, purple 100%), -webkit-linear-gradient(left bottom, violet -5%, violet 5%, teal 0%, teal 10%, steelblue 5%, steelblue 15%, skyblue 10%, skyblue 20%, yellowgreen 15%, yellowgreen 25%, yellow 20%, yellow 30%, gold 25%, gold 35%, orange 30%, orange 40%, crimson 35%, crimson 45%, purple 40%, purple 50%, violet 45%, violet 55%, teal 50%, teal 60%, steelblue 55%, steelblue 65%, skyblue 60%, skyblue 70%, yellowgreen 65%, yellowgreen 75%, yellow 70%, yellow 80%, gold 75%, gold 85%, orange 80%, orange 90%, crimson 85%, crimson 95%, purple 90%, purple 100%);
 background-image: linear-gradient(to left top, violet -5%, violet 5%, teal 0%, teal 10%, steelblue 5%, steelblue 15%, skyblue 10%, skyblue 20%, yellowgreen 15%, yellowgreen 25%, yellow 20%, yellow 30%, gold 25%, gold 35%, orange 30%, orange 40%, crimson 35%, crimson 45%, purple 40%, purple 50%, violet 45%, violet 55%, teal 50%, teal 60%, steelblue 55%, steelblue 65%, skyblue 60%, skyblue 70%, yellowgreen 65%, yellowgreen 75%, yellow 70%, yellow 80%, gold 75%, gold 85%, orange 80%, orange 90%, crimson 85%, crimson 95%, purple 90%, purple 100%), linear-gradient(to right top, violet -5%, violet 5%, teal 0%, teal 10%, steelblue 5%, steelblue 15%, skyblue 10%, skyblue 20%, yellowgreen 15%, yellowgreen 25%, yellow 20%, yellow 30%, gold 25%, gold 35%, orange 30%, orange 40%, crimson 35%, crimson 45%, purple 40%, purple 50%, violet 45%, violet 55%, teal 50%, teal 60%, steelblue 55%, steelblue 65%, skyblue 60%, skyblue 70%, yellowgreen 65%, yellowgreen 75%, yellow 70%, yellow 80%, gold 75%, gold 85%, orange 80%, orange 90%, crimson 85%, crimson 95%, purple 90%, purple 100%);
 background-color: orangered;
 -webkit-background-size: 10em 10em;
 background-size: 10em 10em;
 /* normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity; */
 background-blend-mode: multiply, normal;
}