A sushi board fully designed in HTML and CSS. There are many CSS sharp gradients, linear and circular, applied in the objects on this board. Can you see them? For the full HTML/CSS click here for CodePen.
A sushi board fully designed in HTML and CSS. There are many CSS sharp gradients, linear and circular, applied in the objects on this board. Can you see them? For the full HTML/CSS click here for CodePen.

Designing with sharp gradients in CSS

How to use the CSS linear- and radial-gradient properties with ease

Eva Schicker
5 min readAug 28, 2022

--

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:

Example 1: A smooth linear gradient of two brown hues.
Example 1: A smooth linear gradient of two brown hues.

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:

Example 2: A sharp gradient change is a change of color at a defined percentage point within the gradient. Here, we have 4 sharp gradient changes, and one smooth gradient towards to right side of the color box.
Example 2: A sharp gradient change is a change of color at a defined percentage point within the gradient. Here, we have 4 sharp gradient changes, and one smooth gradient towards to right side of the color box.

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%…

--

--

Eva Schicker

Hello. I write about UX, UI, AI, animation, tech, art & design through the eyes of a designer. UX lead Lelantos Press, NYC UX GA grad. Top writer 5x.