Home › Design Tools

Design Tools

Check colours and build CSS in your browser.

Accessibility

Colour Contrast Checker

Check text and background colours against the WCAG contrast levels, with pass or fail results.

Icons and files

Favicon Generator

Make the standard favicon sizes, a web manifest and the HTML snippet in one zip.

Create CSS

Gradient Generator

Build linear and radial CSS gradients with colour stops and a live preview.

Box-Shadow & Border-Radius Generator

Build box-shadow and border-radius CSS with a live preview.

Type, colour and motion

CSS clamp() Generator

Build fluid font sizes from two sizes and a viewport range, with the CSS to copy.

Cubic-Bezier Easing Generator

Build CSS easing curves from four values, with presets and sampled output.

Colour Converter

Convert between HEX, RGB, HSL and HSV, with a stated rounding rule.