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

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:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store