Design Tools

Pick a colour or type a value; HEX, RGB and HSL are each one click from the clipboard.

Six seamlessly tiling patterns built purely from CSS gradients, with an adjustable angle for the stripes. No image assets, so no extra requests.

Nine formats including CODE128, EAN-13 and CODE39, with check digits computed to spec (EAN-13 takes 12 digits and computes the 13th). The input rules for each format are stated in the UI.

Tune each corner independently or link them into one value, in px or percent. The preview and the copied CSS come from the same numbers, so they cannot drift apart.

Offset, blur, spread and colour with a live preview, plus an optional inset shadow. The output is a standard box-shadow declaration.

Converts between B, KB, MB, GB and TB, switching between the 1000 and 1024 conventions.

Start from one of six presets, then drag the points into any polygon (arrow keys nudge them). The output is a standard clip-path: polygon(), and the preview renders that exact value.

Blends two colours linearly in sRGB and shows the result as HEX, RGB and HSL, each one click away from the clipboard.

Pulls the dominant colours out with histogram quantisation and near-colour merging, which keeps the result deterministic — the same image always yields the same palette.

Builds a 50–900 shade scale from a base colour, each step being the base mixed with white or black by a fixed ratio — simple enough to verify by hand, and it never drifts in hue. Copy the whole scale as CSS variables.

Computes the WCAG contrast ratio and marks whether AA and AAA pass for normal and large text.

Ten pure-CSS loading animations with adjustable size, colour and speed. The preview is rendered from the very CSS in the output box below.

Eight orientations drawn with CSS borders alone — no images and no SVG in the output.

Drag the two handles to shape the easing curve and watch it against a linear reference, which makes overshoot and a slow finish obvious. The curve is emitted as cubic-bezier().

Generates eight sizes from 16 to 512 and packs 16/32/48 into a single favicon.ico. A letter or emoji works as the source, so no image is needed up front.

Tune backdrop blur, saturation, tint opacity and the highlight border; the preview sits on a colourful backdrop because a flat one hides the effect. The output carries the -webkit- prefix so Safari works too.

Visual editor for linear gradients: pick the colours and direction and copy the resulting background declaration.

Hover to sample a pixel and click to lock it — the value comes straight from the image data. Everything runs in your browser; the image is never uploaded.

Renders a 1200×630 share card locally, previews it inside X, Facebook, LinkedIn and Slack card layouts, and emits the twelve og / twitter tags.

Renders an X (Twitter) post for mockups and layout work, exported at 2x for crisp text. The optional label marks it as a mockup.

Converts length, weight, area, volume, temperature and speed using standard conversion factors.