CSS Gradient Text issue

Question

I'm trying to replicate this: http://webdesignerwall.com/tutorials/css-gradient-text-effect however I can't seem to get it to work, although I've used the same code..

This is my HTML:

<h1><span></span>Sign Up</h1>

And CSS:

h1 {
font-family: arial;
font-weight: bold;
font-size: 24px;
position: relative;
color: #a2a2a2;
}

h1 span {
background: url(gradient.png) repeat-x scroll 0 0 transparent;
opacity: 1;
position: absolute;
display: block;
margin-top: 2px;
width: 100%;
height: 21px;
}

And this is what happens:

Any help would be great! Thanks.

thirtydot · Accepted Answer · 2011-06-08 22:37:57Z

1

The problem is with your "gradient image".

You're supposed to use a gradient containing only the same colour as the background, but with the opacity of the gradient starting at around 0% and ending at around 100% (your choice exactly what numbers).

I've loaded the demo image into Photoshop, and made it wider so you can see what it should look like in Photoshop:

edited Jun 8, 2011 at 22:37

answered Jun 8, 2011 at 22:26

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MozazDesign Over a year ago

Ah okay, thanks for clearing that up. However, if the text colour is different to the background color, is this method not possible?

thirtydot Over a year ago

The text colour is irrelevant. The problem is if the gradient colour and background colour are not exactly the same.

MozazDesign Over a year ago

Ah okay, sorry I get it now! Long day.. Thanks for the help!

Chris Laarman · Accepted Answer · 2011-06-08 22:24:21Z

1

ehmm...your text is outside the span?

And besides that, the gradient they use is a white gradient on a white background. You are using a black gradient on a white background :) Might be the difference

answered Jun 8, 2011 at 22:24

Chris Laarman

1,62713 silver badges25 bronze badges

1 Comment

Chris Laarman Over a year ago

yeah saq that later on. But fix the gradient image and it will work!

Billy Moon · Accepted Answer · 2011-06-08 22:27:10Z

1

You should make your gradient file use the same color as the background of your page as the 'paint' and keep the rest transparent

answered Jun 8, 2011 at 22:27

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Collectives™ on Stack Overflow

CSS Gradient Text issue

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related