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 Enhancing Design with CSS Finishing Touches CSS Gradients: Color Stops and Transparency

Samuel Kleos
seal-mask
.a{fill-rule:evenodd;}techdegree
Samuel Kleos
Front End Web Development Techdegree Student 3,703 Points

Not very clear about the colour stops.

Does the 60% value mean that the gradient starts or begins at 60%.

Does the 100% value which is set last in the series of colours mean that the gradient starts from the right, or from the left?

Or does the gradient simply overlap other gradients and radiates outward from the colour stop location?

1 Answer

Steven Parker
Steven Parker
218,596 Points

The percentage can either be a start, stop, or interior point in the gradient, depending on which parameter it is used with. And by default, the direction goes top to bottom; but you get to choose which direction the gradient is applied.

A little experimentation might be more helpful than additional explanation, I suggest trying out one of the many online gradient generators available, such as cssgradient.io.