Designing with sharp gradients in CSS
How to use the CSS linear- and radial-gradient properties with ease
--
Sometimes, we encounter a paradox in design, such as a sharp gradient.
Smooth
Gradients are supposed to be smooth. A smooth gradient blends two or more colors together harmoniously, as in this example:
Example 1:
Sharp
A sharp gradient, on the other hand, is a gradient that does not have a smooth transition, but sharp changes of colors at a specified point. In example 2, we see 4 sharp gradients (first 3 colors, +1 at the right end) and one smooth gradient:
Example 2:
A sharp gradient is defined as a precise percentage value in the gradients flow that ends one color, and starts the next color.
In example 2, the first color #863416 ends at 70%, and the second color #cd704e starts at exactly the same value of 70%. Thus, we have created a sharp color transition.
In CSS, this linear gradient reads as follows:
.div-item {
background-image: linear-gradient(90deg, #863416 70%,
#cd704e 70%, #cd704e 80%, #863416 80%, #863416 86%, #cd704e 86%,
#863416 98%, #3f1600 98%);
}To note: A gradient is applied as the background-image property in CSS.
Why is a sharp gradient interesting in CSS?
Defining an irregular color pattern in a <div>-object can save a lot of time, and less code to add details to an object. We only need to write one <div></div>, and one CSS property (background-image) for that object, as shown in the above code in example 2.
<div class="div-item"></div> .div-item {
background-image: linear-gradient(90deg, #863416 70%, #cd704e 70%, #cd704e 80%…
