CSS Gradient Generator

Designing a gradient by eye

CSS gradient syntax is easy to read and hard to imagine. Nobody can look at a set of colour stops and percentages and picture the result, which means writing gradients by hand is a cycle of edit, refresh and adjust. Building it visually and copying the finished CSS removes that loop entirely, and it makes experimenting cheap enough that you actually try more than one idea.

Why some gradients look muddy

Blending between two colours that sit far apart on the colour wheel passes through everything in between, and the midpoint is often a dull grey or brown nobody chose. Blue to orange is the classic example. Gradients between colours that are near each other stay clean, and if you want distant colours to work together, adding a deliberate middle stop lets you control what the transition passes through instead of leaving it to the maths.

Practical points

• Linear gradients suit backgrounds and buttons. Radial gradients suit glows and spotlights.
• Subtle gradients age better than dramatic ones, which date quickly.
• Check text contrast against both ends, since a heading readable at one end can vanish at the other.
• Gradients are drawn by the browser, so they cost nothing in file size and scale to any dimension.