Generate solid colors using CSS linear-gradient (not smooth colors)

css gradient linear-gradients
Evgeny Boxer picture Evgeny Boxer · Jul 14, 2017 · Viewed 10.8k times · Source

Assuming my linear CSS gradient looks like this:

background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 100%)

It will generate a CSS gradient that looks like this:

enter image description here

How do I make the same gradient but with solid colors without the transitioning between the colors? (using CSS)

Something similar to this:

enter image description here Thanks

Answer

fen1x picture fen1x · Jul 14, 2017

Like this 

.gradient {
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, 
      red    20%, 
      green  20%, 
      green  40%, 
      blue   40%, 
      blue   60%, 
      purple 60%, 
      purple 80%, 
      yellow 80%,
      yellow 100%
  );
}
<div class="gradient"></div>

Related questions

Gradient text color

Is there a generator , or an easy way to generate text like this but without having to define every letter So something like this: But not with rainbow colors but generate with other colors (for example white to grey/light …

Read More
SVG gradient using CSS

I'm trying to get a gradient applied to an SVG rect element. Currently, I'm using the fill attribute. In my CSS file: rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } And the rect element has the correct fill color …

Read More
How can I prevent CSS gradient banding?

I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site …

Read More