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:

--

--

Eva Schicker

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