W3C home > Mailing lists > Public > www-style@w3.org > April 2013

Applying gradients to text

From: irfan mir <theirf@gmail.com>
Date: Sat, 13 Apr 2013 14:05:14 -0400
Message-ID: <CAMPj_Rp9jjCy-JEJSpaKqDWd195imsyT9DOf=tKWrERVMmTWHA@mail.gmail.com>
To: "www-style@w3.org" <www-style@w3.org>
Hello,
I am trying to apply a gradient to text using CSS3 Gradients and
background-clip:text;, but it doesn't seem to be working.

In face, one can kind of see the gradient, but only at the edges of the
text.

The text is wrapped in spans and I'm applying the following to the spans.

What am I doing wrong?

background:
linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,

linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;
-moz-background-clip:text;
-webkit-background-clip:text;
background-clip:text;
Received on Saturday, 13 April 2013 18:05:45 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:10 UTC