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 CSS Basics (2014) Enhancing the Design With CSS Gradients

Posted by Nancy Vogt
Nancy Vogt
7,294 Points

How to set bottom to top on linear-gradient?

this is my answer
.main-header{ background-image: linear-gradient(bottom to top, steelblue 0%, darkslateblue 90%); } It says I am not setting the gradient bottom to top

style.css 
/* Complete the challenge by writing CSS below */

.main-header{
  background-image: linear-gradient(bottom to top, steelblue 0%, darkslateblue 90%);
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->
  </body>
</html>
Sharon Kearney
Sharon Kearney
8,662 Points

try this: linear-gradient(to top,

Nancy Vogt
Nancy Vogt
7,294 Points

Thank you I finally figured as 0deg

2 Answers

Mateo Komljenovic
Mateo Komljenovic
3,771 Points
Mateo Komljenovic
Mateo Komljenovic
3,771 Points

I personally find it easier setting it like:

.main-header{
  background-image: linear-gradient(to top, steelblue, darkslateblue 90%);

You will find that for steelblue is by default 0%, so there is no need for that kind of input.

Leyton Parker
Leyton Parker
6,556 Points
Leyton Parker
Leyton Parker
6,556 Points

Or you can use an angle like this

linear-gradient(180deg);