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: Color Stops

rajbee
rajbee
6,657 Points

The percentage in color stops in css gradients

I don't understand the meaning of percentage in the color stops. Example:

background-image: radial-gradient(circle at top right, #ffa949 0%, firebrick 60%, dodgerblue 120%);

60 % and 120% of what/which thing ?

2 Answers

The percentages indicate where the gradient's colors are pure. The center of the gradient is in the upper right corner of the background (0% indicates the starting point for the gradient). The color there is #ffa949. Imagine a diagonal line extending from the upper right corner (the center of the gradient 0%) to the bottom left corner which is 100%. The color stops placed along this line indicate where the pure color exists. In this case you have a firebrick red stop placed at 60% of the distance from the upper right corner (0%) and the bottom left corner (100%). The color (at the 60% mark) is a pure firebrick red. The colors between 0% and 60% are some combination of #ffa949 and firebrick red. The next stop continuing down is dodgerblue. However, the pure dodgerblue is placed outside the background at 120% along the horizontal which started in the upper right corner. You can't see the pure dodgerblue because it's outside the visible area of the background. Thus, the only colors you see in the lower left of the background are a mixture of firebrick red and dodgerblue. Hope this helps.

Hi Joe Hartman I'm assuming you won't get this since your response is a year old, but I actually don't get it. Who defines where 0 is? Are these designated points in a box standardized or arbitrary?

Beau Delfosse
Beau Delfosse
9,135 Points

you can only see your gradient until 100%, If you write 120% that color will be out of your box and you will only visually see the transition towards that color that is out of vision.