Free CSS and colour design tools

Four tools for the visual layer: two that write CSS for you, and two that deal with colour. They are aimed at the point where design decisions become code — you know roughly what you want, and you need the exact declaration or the exact hex value.

None of them try to be a design application. They generate a correct value, show you what it looks like, and let you copy it.

The four tools

The CSS gradient generator builds linear, radial and conic gradients with any number of colour stops, an angle control and a set of starting presets. Conic support matters more than it sounds: it lets you draw a pie chart or a progress ring in a single CSS declaration with no markup and no script.

The box shadow generator stacks multiple shadow layers with a live preview. Layering is what separates a shadow that looks designed from one that looks like a default — real objects cast a tight dark shadow and a wide soft one at the same time.

The colour converter and palette tool moves between HEX, RGB, HSL and HSB, generates a full scale of shades and tints from one colour, and checks contrast against the WCAG thresholds.

The colour picker from image reads the exact value of any pixel in an image you load, and extracts the six colours that dominate it.

Contrast is the one that matters most

Of everything on this page, the contrast checker is the tool with real consequences. WCAG AA requires a ratio of 4.5:1 for body text and 3:1 for large text, and a great many brand palettes fail against white without anyone noticing — because the designer checked it on a good monitor in a well-lit room.

Contrast is calculated from relative luminance rather than from how different two colours appear. That is why red text on a green background fails badly despite looking distinct: the two are similarly bright. If you check one thing on a site before launch, check that your body text passes against your background.

The usual fix is not to abandon the brand colour but to derive a darker variant for text and keep the original for larger headings, buttons and accents. The shades and tints row exists for exactly that.

Working between the tools

A common sequence: pull a palette out of a hero photograph with the colour picker, take the most useful colour into the converter to generate a full scale of tints and shades, check the darkest against white for text contrast, then feed two of the resulting values into the gradient generator for a section background.

Once the CSS is written, the code minifier will compress it, and the image tools will handle the photographs that go with it.

Frequently asked questions