CSS Display One Character in 2 Colors

Question

Is it possible in css make a single character in 2 colors?

I mean for example character "B" The first upper half in RED and the second half in BLUE

no, it is not possible, maybe you can try to superimpose two B letters and hide the top half for one, and the bottom half of the second one.. — Mazeltov, Mar 05 '14 at 10:55
take a look at http://stackoverflow.com/questions/6258690/is-there-any-way-to-change-the-color-of-text-halfway-through-a-character-on-a?rq=1 — keuleJ, Mar 05 '14 at 11:09

score 3 · Answer 1 · answered Mar 05 '14 at 11:00

3

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Fill in your own vendor prefixes.

answered Mar 05 '14 at 11:00

slynagh

601
4
16

I don't mean the background! I mean the text color! – Apoleo Mar 05 '14 at 11:29
You didn't even try it did you? – slynagh Mar 05 '14 at 11:30
I did: http://jsfiddle.net/LZXTS/1/ – Apoleo Mar 05 '14 at 11:37
`-webkit-background-clip: text; -webkit-text-fill-color: transparent;` – slynagh Mar 05 '14 at 11:42
yeah with chrome works! with firefox is not – Apoleo Mar 05 '14 at 11:46
When I add text-shadow, the entire shadow is visible through the text and it looks bad. Is there any way around this? – Ian Markind Aug 11 '17 at 05:44

score 2 · Answer 2 · answered Mar 05 '14 at 11:00

One solution would be:

HTML:

<span class="half" title="B">B</span>

(see that you have to set an attribute value)

CSS:

  .half {
        font-size: 90px;
        font-weight: bold;
        position: relative;
        color: blue;
        line-height: 1em;
    }

    .half:before {
        position:absolute;
        content:''attr(title)'';
        color: red;
        height: .5em;
        overflow: hidden;
    }

The problem is that every browser calculates the .5em value differently

CSS Display One Character in 2 Colors

2 Answers2

Related