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

Posted by MUZ140185 Muyambo
MUZ140185 Muyambo
5,314 Points

How do we create a repeating gradient with smoother color transitions?

How do we create a repeating gradient with smoother color transitions?

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

Can you explain a little more what you mean please, and where you would be wanting use the gradient?

Craig

2 Answers

Lin Lu
Lin Lu
29,171 Points
Lin Lu
Lin Lu
29,171 Points

Hi,

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
Brian Douglas
822 Points
Brian Douglas
Brian Douglas
822 Points

Hi,

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