Multi-Colored Text in one line

Question

I'm trying to make a title with multiple colors and I've already found a way but I'm not quite satisfied with it. I want it to be on attribute or a h1 element, with the text and the multiple colors

Here's what I've been using

body {
  background-color: #1A1A1D;
}

.header {
  text-align: center;
  font-size: 48px;
}

#super {
  color: #FF6447;
  text-shadow: 2px 2px #000000;
}

#bone {
  color: #FFB951;
  text-shadow: 2px 2px #000000;
}

#craft {
  color: #FFF547;
  text-shadow: 2px 2px #000000;
}

<div class="header">
  <a id="super">SUPER</a><a id="bone">BONE</a><a id="craft">CRAFT</a>
</div>

Maybe it could be useful for you https://stackoverflow.com/questions/39884260/is-it-possible-to-set-horizontal-gradient-to-text-via-css-left-letter-one-colo — Juan Caicedo, Oct 08 '19 at 19:01
https://stackoverflow.com/questions/21654928/how-can-i-give-different-color-for-each-letter-in-a-text-field Maybe? — EGC, Oct 08 '19 at 20:58

EternalHour · Accepted Answer · 2019-10-08T19:33:14.747

Not quite sure what you're after, but if you want the font color to be based on an attribute you can use data. The nice thing about this approach instead of using ids, is that you can easily set/get the values or elements with Javascript if needed.

Also, you should be using span tags rather than a.

body {
  background-color: #1A1A1D;
}

.header {
  text-align: center;
  font-size: 48px;
}

span[data-color] {
  text-shadow: 2px 2px #000000;
}

span[data-color="super"] {
  color: #FF6447;
}

span[data-color="bone"] {
  color: #FFB951;
}

span[data-color="craft"] {
  color: #FFF547;
}

<div class="header">
  <span data-color="super">SUPER</span><span data-color="bone">BONE</span><span data-color="craft">CRAFT</span>
</div>

score -1 · Answer 2 · edited Oct 08 '19 at 19:08

-1

Try this:

#someID {
  text-shadow: 2px 2px #000000;
}

.super {
  color: #FF6447;
}

.bone {
  color: #FFB951;
}

.craft {
  color: #FFF547;
}

<div class="header">
  <a id="someID"><span class="super">SUPER</span><span class="bone">BONE</span><span class="craft">CRAFT</span></a>
</div>

In this case you have only one a tag.

edited Oct 08 '19 at 19:08

j08691

204,283
31
260
272

answered Oct 08 '19 at 19:02

Jakub

123
2
13

Multi-Colored Text in one line

2 Answers2