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
How to Have Multiple Columns That Consume 100% Height Using Twitter Bootstrap
How to Force This CSS Grid to Wrap to a New Line Without Specifying Minmax Sizes
Can You Use CSS Transitions on Svg Attributes? Like Y2 on a Line
Sass Store Selector in Variable
Lighten the Background Colour from Another Class
How to Invert Stroke Text Color Depending on Background
Bootstrap 3 Arrow on Dropdown Menu
Image Stretching in Flexbox in Safari
How to Put a Div in Center of Browser Using CSS
Generate Solid Colors Using CSS Linear-Gradient (Not Smooth Colors)
Webkit Linear Gradient Stops Render Incorrectly
Different Behavior of Flexbox with (Overflow-Y) Scroll on Safari, Firefox and Edge VS Chrome
Extending Bootstrap 4 and SASS
Using Createmuitheme to Override Default Styles on Div'S, P'S, Body