Как сделать Заголовок разноцветным, а также чтобы цвета букв были темными?

Question

[Just_User1]

Пример:

Answer 1

[Андрей Федоров]

Предложу свой вариант, без правки html, только на чистом css
https://codepen.io/aliencash/pen/MGoGXz?editors=1100

Comments

[diadiafiodor]

респект

[Вадим Кот]

Неплохо бы префиксы добавить для улучшения поддержки https://codepen.io/anon/pen/aGwGxz?editors=1100

[Андрей Федоров]

Вадим Кот, держите

h1 {
   font-size: 100px;
   display: inline-block;
   background-image: -webkit-gradient(linear,
      left top, right top,
      color-stop(0, red), color-stop(1em, red),
      color-stop(1em, green), color-stop(2em, green),
      color-stop(2em, blue), color-stop(3em, blue),
      color-stop(3em, cyan), color-stop(4em, cyan),
      color-stop(4em, magenta), color-stop(5em, magenta),
      color-stop(5em, gold), color-stop(6em, gold)
   );
   background-image: -webkit-linear-gradient(left,
      red 0, red 1em,
      green 1em, green 2em,
      blue 2em, blue 3em,
      cyan 3em, cyan 4em,
      magenta 4em, magenta 5em,
      gold 5em, gold 6em
   );
   background-image: -o-linear-gradient(left,
      red 0, red 1em,
      green 1em, green 2em,
      blue 2em, blue 3em,
      cyan 3em, cyan 4em,
      magenta 4em, magenta 5em,
      gold 5em, gold 6em
   );
   background-image: linear-gradient(90deg,
      red 0, red 1em,
      green 1em, green 2em,
      blue 2em, blue 3em,
      cyan 3em, cyan 4em,
      magenta 4em, magenta 5em,
      gold 5em, gold 6em
   );
   color: transparent;
   -webkit-background-clip: text;
           background-clip: text;
   letter-spacing: .3em
}

[Вадим Кот]

Андрей Федоров, Я по большому счету имел ввиду -webkit-background-clip, так как без него в хроме ваше решение будет нерабочим.

Answer 2

[Владимир Проскурин]

Использовать для каждой буквы свой элемент span

<p class="chars">
  <span class="chars__item chars__item_orange">H</span>
  <span class="chars__item chars__item_lime">E</span>
  <span class="chars__item chars__item_blue">A</span>
  <span class="chars__item chars__item_purple">D</span>
  <span class="chars__item chars__item_blue2">E</span>
  <span class="chars__item chars__item_green">R</span>   
</p>

И пишите в стилях цвет для каждого класса.
Пример https://jsfiddle.net/a4w4ydpu/

Answer 3

[Кирилл]

Оберните каждую букву в span и стилизуйте через nth-child с помощью css