Suggested
5

Gradients

Pixy team · 28 July 2026
Design systemcolors

Build and adjust gradients visually instead of writing color stops by hand.

Comments

Pixy team28 July 2026
A solid color is easy. A gradient usually means opening CSS. You tweak an angle, move a color stop, save, refresh, then do it all over again until it finally looks right.

Gradients should work like any other fill. Choose a gradient instead of a solid color, drag the stops where you want them, add or remove colors, and adjust the angle directly on the page. Linear, radial, and conic gradients all work the same way, without writing a single color stop.

Because you're working directly on the real page, you see the gradient at full size immediately. What looks smooth in a small preview can break when it stretches across a wide section, and text that seems readable in one area can become hard to see in another. This only becomes clear when you're looking at it in the actual layout.
Posting as a guest · Sign in