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
Boris Kamp
16,660 PointsCan this gradient be achieved in css
Hi guys!
Please see the attached screenshot. It's a step identifier for a webshop checkout progress.
I was wondering how you would create this css gradient, I have no clue to be honest. Off course, when you get to the next step, that one and all previous should be solid orange and fade to the next point.
Would love to hear from you guys, thanks so far!
Boris Kamp
16,660 Pointshaha silly me, I linked it now, thanks!
1 Answer
Steven Parker
243,199 PointsThe gradient itself is simple.
Something like "background: linear-gradient(90deg, rgb(230,123,0), white);" would be close. For gradient creation, you might enjoy this free online gradient generator tool.
The trick is the numbered circles and lines along the way. Perhaps this would be a job for SVG?
Boris Kamp
16,660 PointsThanks for your reply! I am struggling more with the lines and circles with one gradient, any clues?
Steven Parker
243,199 PointsI do think SVG is your best bet, you might start with SVG Basics.
Jacob Mishkin
23,118 PointsJacob Mishkin
23,118 PointsYou need to attach the screenshot.