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

Matthew Keys
Matthew Keys
1,922 Points
Posted by Matthew Keys
Matthew Keys
1,922 Points

Negatives values of color stops making slashes - please explain

Hi. If I use the following code, it has a light blue color at the bottom left, and half way it changes suddenly into purple. Can someone please explain why there is a sudden slash?

background-image: linear-gradient(35deg, #6633ff 0%, #3366ff 50%, #0099ff -100%);

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Listing stop locations out of order causes a sudden transition.

It doesn't have to be a negative value. You will see the same thing for any value less than or equal to 50%. Since the previous stop was already at or beyond the current stop position, the gradient generator just switches the color completely at that point.

You might enjoy this Gradient Generator for experimenting with CSS gradients. You'll notice if you set two stops at the same point you'll get that same sudden transition. But if you move one stop to the other side of another, the generator automatically changes the CSS to order them properly.