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!

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


Chris Nunez
Chris Nunez
Front End Web Development Techdegree Student 3,347 Points

Something worth noting is that you can preview the direction of the color gradient when hovering over the CSS properties

Just to clarify, in certain development environments or tools, when you hover over the CSS properties for a gradient, it shows a preview of the color gradient direction. This can be incredibly useful for developers as it allows them to visualize the gradient without having to constantly refresh their page.

Hereโ€™s an example:

If you hover over โ€œ(30deg, #cc4e13, papayawhip);โ€ in the following code:

background-image: linear-gradient(30deg, #cc4e13, papayawhip);

Any modifications you make to the degree or color will be previewed right above it. This feature can save a lot of time and make the process of designing with gradients much more efficient.

1 Answer

Steven Parker
Steven Parker
227,126 Points

And for those who are not using tools with that feature built-in, there are many web tools available that display the final result as you create the code, or allow you to make the gradient visually and then create the code for you.

A few popular examples include (and there are many others):