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
Allison Walker
17,137 PointsWhat exactly does 0deg do, when applied to a linear gradient?
I didn't have trouble with the lesson, at all. I just am not sure I understand what 0deg does when applied as a direction(?) to a linear gradient. I didn't see this in the teacher's notes about gradients.
2 Answers
Greg Kaleka
39,021 PointsHi Allison,
The direction of the gradient can be represented by an angle. 0deg is straight up, 90deg is to the right, etc.
Here's a Codepen you can play around with. Change the angle by changing the number before "deg".
There are all kinds of tweaks you can make to linear gradients. Check out the MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Benjamin Hedgepeth
5,672 PointsBy default, a linear gradient transitions from top to bottom in the browser window. If you wanted the inverse of that you would declare 'to top' as the first thing declared in the linear-gradient function. There is the ability to use degrees to angle the default color stops. Starting at 0deg, the linear gradient starts at the bottom of the element the gradient is applied to. Increasing the angle will rotate the gradient clockwise.
So '0deg' and 'to top' are synonymous.
theofanissiassios
6,498 PointsI guess what's confusing is that the preview shows the gradient going from left to right instead of bottom to top as you would expect.