Gradient H1 - Make my H1 font text a gradient of two different colors

Question

How do I make my h1 text a gradient from #006768 to #2E0750.

I use Wordpress.

I basically want to achieve the following with code:

http://www.reading-college.ac.uk/sites/default/files/gradient-example.jpg

Can't post an image as lacking enough rep.

My site URL is:

http://79.170.44.112/activate-enterprise.co.uk/

I've searched online but can't seem to find a suitable solution?

UPDATE

This is the code I've tried:

h1.entry-title {
font-size: 72px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.03, rgb(44,7,85)),
color-stop(0.76, rgb(0,103,107))
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

However it's still not showing on my homepage, rather reverting to #2E0750

SECOND UPDATE

Managed to get it work, since I reduced the font size, I had to change the locations accordingly as you couldn't really see the gradient change.

possible duplicate of [CSS3 Gradients not working](http://stackoverflow.com/questions/12097529/css3-gradients-not-working) — Paulie_D, Sep 02 '14 at 14:38
As far as I know, text fill is only supported by Chrome/Safari. — Aibrean, Sep 02 '14 at 14:38
Indeed, -webkit- specific solutions are not ideal in this situation. Check my answer below it is Modern Browser compliant. — Mike, Sep 02 '14 at 15:31

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

Very possible, check out this JSFiddle from this stackoverflow post.Appears to only work in -webkit- though, so YMMV.

h1 {
  font-size: 72px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.03, rgb(250,3,3)),
    color-stop(0.52, rgb(240,255,127)),
    color-stop(0.76, rgb(42,24,173))
);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

It makes use of the webkit-gradient CSS3 property.

edited May 23 '17 at 11:49

Community

1
1

answered Sep 02 '14 at 14:41

tommymcdonald

1,528
2
10
12

Thanks, works in JSFiddle in my Chrome browser but when replicated in my stylesheet the color reverts to the purple(#2E0750) please see my update above. Any idea? – user3480560 Sep 02 '14 at 15:12
This is not a Cross-Browser compliant solution, and as such is inferior to other options. – Mike Sep 02 '14 at 15:28
Thanks worked perfectly for my solution. Not cross browser but the previous answer was not suitable in this case. Thank-you for taking the time out to answer. – user3480560 Sep 03 '14 at 10:33

Mike · Answer 2 · 2014-09-02T15:34:13.883

You can leverage SVG and some CSS to achieve a Modern Browser compliant version of what you're going for. You'll need your gradient/background image, and some simple CSS on an SVG element and SVG text using the "Pattern" element as your url for the fill.

Html Elements Below

<svg>
<defs>
    <pattern id="rainbow" patternUnits="userSpaceOnUse" width="400" height="400" >
        <image xlink:href="http://img1.wikia.nocookie.net/__cb20130224165510/clubpenguin/images/9/9b/Rainbow_to_alpha_gradient.png" width="400" height="400" />
    </pattern>
</defs>
<text y="1.2em">SVG rocks!</text>
</svg>

CSS Below

svg {
    width: 6em; height: 1.5em;
    font: 900 500%/1.2 'Arial Black', sans-serif;
}

text { fill: url(#rainbow); }

→JS FIDDLE EXAMPLE HERE←

Not appropriate due to the html needed, will be handing out this website to someone with zero html knowledget (just osme training from me in Wordpress). I did try it out and it worked however. Thanks for answering. — user3480560, Sep 03 '14 at 10:34

Gradient H1 - Make my H1 font text a gradient of two different colors

2 Answers2