Is it possible to achieve following text effect via css and html?

Question

I'm stuck and have no idea how to achieve following task. I searched the web, but have found nothing similar.

This is a text effect I want to achieve:

enter image description here

As you can see it has multiple colours (brown through the middle and white at the edges.) Is it possible to achieve something like this entirely in css and html (if it is please point me at right direction) or is it only achievable by using graphics?

Similar issue: http://stackoverflow.com/questions/5634471/can-i-have-a-horizontal-multiple-colour-gradient-on-text-using-css3-html-5 — Vucko, Dec 22 '12 at 16:46

score 5 · Accepted Answer · edited May 23 '17 at 12:18

demo jsfiddle

this appears to only have webkit support at this time (FF/IE has no text-fill-color property)

h1{
    font-size:40px;
    font-weight:bold;
    font-family:Helvetica,Arial,sans-serif;
    margin:0;
    padding:0;
    float:left;
    background:-webkit-linear-gradient(-60deg, #ffffff 0%,#ffffff 25%,#000000 25%,#000000 75%,#ffffff 75%,#ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

this is based on @Blowsie's answer from a similar post

score 1 · Answer 2 · answered Dec 22 '12 at 16:46

I've never tested this myself but I'm near 100% sure this will work.

h1{
    content:'Hello';//this isn't needed but it's your content I'm guessing
    mask-image:linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 20%, #000000 20%, #000000 80%, #FFFFFF 80%, #FFFFFF 100%);//WW3
}

Using the webkit extensions respectively.

score 1 · Answer 3 · answered Dec 22 '12 at 16:49

You can use image and CSS property background-clip: text to achieve something similar

http://trentwalton.com/2010/03/24/css3-background-clip-text/

It is still in development and works only on webkit

You could combine it together with css gradients
http://gradients.glrzad.com/

Is it possible to achieve following text effect via css and html?

3 Answers3