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

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.

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.

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…