'How to create a gradient with 3 colors in CSS without color escalation

In this example I have a gradient of 2 colors, alignd to right.

Image

background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);

Is there any way I can have more than 2 colors? For example may I add red color on the right of the second one?

csscolorsgradientlinear-gradients


Solution 1:[1]

You can use multiply background, like this:

background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);

Also see this codepen for much combinations.

Solution 2:[2]

Late answer but no doubt it will help someone else in the future...

I have found a good website called CSS Gradient that generates your gradient color with full control and allows you to copy the CSS code.

This gradient was generated by this website:

div{
width: 100%;
height: 200px;
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(30,250,0,1) 49%, rgba(4,0,255,1) 100%);
<div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander Z
Solution 2 Anis

Related Questions