Generate Solid Colors Using CSS Linear-Gradient (Not Smooth Colors)

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

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>

how to split background of div into 3 solid colors from left to right using linear gradient?

To achieve that solid color behavior, specify starting and ending points of each color, setting the starting point of next color on top of the ending point of previous color. (0 - 40% for green, 40% - 60% for blue, 60% - 100% for red).

background: linear-gradient(90deg,
rgba(0,255,0,1) 0%, rgba(0,255,0,1) 40%,
rgba(0,0,255,1) 40%, rgba(0,0,255,1) 60%,
rgba(255,0,0,1) 60%, rgba(255,0,0,1) 100%
);

P.S. CSS Gradient is a great website if you want to see how gradients work.

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

Sure, just add color stops at every (100/numColors)%

div {

background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);

width: 100%;

height:64px;

}
<div></div>

Border-image linear-gradient as two-tone solid color

You need to add a number in the end of the border-image property. In your case it has no effect but it is still required. Also use to right instead of right

div {

height: 50px;

width: 80%;

padding: 4px;

box-sizing: border-box;

position: relative;

background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);

/* What I'm trying: */

border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0) 1;

border-style: solid;

border-width: 2px 0 2px 0;

}

body {

padding: 20px;

background-color: #fff;

}
<div>Two tone solid color top and bottom border to<br> match the two tone background</div>

Hard edged gradient in css?

What about multiple gradient like this:

.line {

height:5px;

background-image:

linear-gradient(red,red),

linear-gradient(blue,blue),

linear-gradient(yellow,yellow),

linear-gradient(purple,purple);

background-size:

calc(1 * (100% / 4)) 100%,

calc(2 * (100% / 4)) 100%,

calc(3 * (100% / 4)) 100%,

calc(4 * (100% / 4)) 100%;

background-repeat:no-repeat;

}
<div class="line">

</div>

How to style 25% of div one solid color and another 75% div to another solid color?

You could try something like this:

.bg-blue {
width: 100%;
height: 25px;
background: -moz-linear-gradient(left, blue 75%, white 25%);
background: -webkit-linear-gradient(left, blue 75%, white 25%);
background: linear-gradient(to right, blue 25%, white 25%);
}

I've put the height just for testing, you can adjust it as you want then.

How to make gradients in Chrome smooth?

Reason:

As I had described in comments, when the end point of one color is the start point of another (that is, a hard-stop gradient), the change of colors is sudden and such a sudden change at an angle is known for producing rough edges even in other browsers (which has maybe got fixed by now). Giving a gap between end point of one color and start of the next produces a smoother change of color and thus minimises rough edges.

Not much experimentation is required for this (or trial and error), a 1 or 2% gap is almost always sufficient.

Workaround:

Changing the color stop points to produce a more smooth change of colors instead of giving it a hard stop seems to be helping.

body {

background-image: linear-gradient(45deg, red 24%, transparent 26%, transparent 74%, red 76%, red), linear-gradient(-45deg, red 24%, transparent 26%, transparent 74%, red 76%, red);

background-size: 60px 60px;

background-position: 0 0, 30px 30px;

}


Related Topics



Leave a reply



Submit