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
MUZ140185 Muyambo
5,314 PointsHow do we create a repeating gradient with smoother color transitions?
How do we create a repeating gradient with smoother color transitions?
2 Answers
Lin Lu
29,171 PointsHi,
In order to create a smooth color transition, you need to use the repeating-linear-gradient css property, you should also make sure that the beginning color and the ending color are the same, so they can connect seamlessly.
There's a video that explains exactly what you need: https://teamtreehouse.com/library/css-foundations/css-gradients/repeating-gradients-2
Or you can check out the following example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
height: 400px;
width: 400px;
margin: auto;
background: repeating-linear-gradient(grey 10%, white 20%, grey 30%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Brian Douglas
822 PointsHi,
This Codepen is a great example of how to use gradients. You should be able to find what you are looking for here: http://codepen.io/Venerons/pen/jbtdz?editors=010
Goodluck,
Brian
Craig Watson
Courses Plus Student 27,150 PointsCraig Watson
Courses Plus Student 27,150 PointsHi,
Can you explain a little more what you mean please, and where you would be wanting use the gradient?
Craig