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: