Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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!