Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Casey Runnells
Casey Runnells
Courses Plus Student 5,765 Points

Vertical Text Gradient?

Hello, I was just wondering if text with a vertical gradient is possible with css? I've read and seen some examples of gradients over the horizontal axis but didn't really see anything similar to the below image.

VerticalGradient

2 Answers

John Coffin
John Coffin
10,359 Points
John Coffin
John Coffin
10,359 Points

As you probably already know, getting the text to use a gradient requires a trick: Set the background color to a gradient, set the text colour to transparent, and then clip the background to fit the text. As per CSS Tricks, Gradient Text is only available for webkit, so you might want to check out browser support.

As you mention, the default for linear graients is horizontal. However, it is really simple to change this to vertical by adding the browser specific direction specifier (i.e. "to right" for the standard syntax). Please see CSS3 Gradients for all the information you need.

EXAMPLE:

HTML

<body>
  <h1>Colourful Text</h1>
  <p>For this example I have included some colourful text</p>
</body>

CSS

h1 {
  font-size: 4em;
}

p {
  font-size: 3em;
  font-weight: 800;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, 
    violet, purple); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, orange, yellow, green, blue, 
    violet, purple); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, orange, yellow, green, blue, 
    violet, purple); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red, orange, yellow, green, blue, 
    violet, purple); /* Standard syntax */
}
Camila N
Camila N
10,677 Points
Camila N
Camila N
10,677 Points

This doesn't seem to work on firefox :(

Casey Runnells
PLUS
Casey Runnells
Courses Plus Student 5,765 Points
Casey Runnells
Casey Runnells
Courses Plus Student 5,765 Points

Thanks John!