CSS линейный градиент на шрифт

Рассказываю как с помощью CSS сделать линейный градиент (переливание цвета) для шрифта.

Решение довольно простое, но необычное.

    background: -webkit-gradient(linear, left top, right top, from(#FFD43A), to(#ED5555));
    background: -webkit-linear-gradient(left, #FFD43A, #ED5555);
    background: -moz-linear-gradient(left, #FFD43A, #ED5555);
    background: -o-linear-gradient(left, #FFD43A, #ED5555);
    background: linear-gradient(to right, #FF9800, #cb0202);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

Прозрачная буква с обводкой

color: transparent;

-webkit-text-stroke: 1px white;

text-stroke: 1px white;

text-shadow: 0px 4px 10px rgba(55, 171, 255, 0.2), 2px 2px 1px rgba(0, 0, 0, 0.1);

pizzachicago.ru/yekaterinburg/wp-content/themes/pizza_new/css/style.css

background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
background: -webkit-radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), -webkit-radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
color: #9f7928;