1

Question

How can I modify my CSS to add 5 different colors to the background?

I don't want them to fade into each other, i want hard stops.

Code

I have this codepen demo that I have started. But here is my basic code:

HTML

<div class="header-trim"></div>

CSS

background: linear-gradient(to right, #946f20 20%, #041b2c 20%, #00adf2 20%, #30bc9d 20%, #7f469f 20%);
JGallardo
  • 11,074
  • 10
  • 82
  • 96

2 Answers2

2

You have to list each color twice in the linear background, like "from 0% to 20%", then "from 20% to 40%" etc., and the percentage values always mean the percentage of the whole distance, so it's:

background: linear-gradient(to right, #946f20 0%, #946f20 20%, #041b2c 20%, #041b2c 40%, #00adf2 40%, #00adf2 60%, #30bc9d 60%, #30bc9d 80%, #7f469f 80%, #7f469f 100%);

Here's the result: http://codepen.io/anon/pen/BWNbQG

Johannes
  • 64,305
  • 18
  • 73
  • 130
1

Add the color values where another color ends. You are basically adding in points where a color starts and stops. And if the starting point and stopping point aren't the same you will get a transition effect.

css

.header-trim {
  background: linear-gradient(to right, #946f20 20%, #041b2c 20%, #041b2c 40%, #00adf2 40%, #00adf2 40%, #00adf2 60%, #30bc9d 60%, #30bc9d 80%,#7f469f 80%, #7f469f 100%);}

codepen

Rob Monhemius
  • 4,822
  • 2
  • 17
  • 49