Free design tools
Colour palettes and contrast, gradients, box shadows, cubic-bezier curves, favicons, aspect ratios, social image sizes and a colour-blindness check. Copy the CSS straight out.
- Contrast Checker — Pick a text and background colour and see their WCAG 2.1 contrast ratio, with clear pass/fail badges for AA and AAA at normal and large text sizes, plus a live preview. Runs entirely in your browser.
- Aspect Ratio Calculator — Lock an aspect ratio and solve for the missing dimension: enter a width to get the matching height or vice-versa, pick common presets like 16:9 or 4:3, and read the simplified ratio. Runs entirely in your browser.
- Cubic Bezier Editor — Drag the two control points to shape a CSS cubic-bezier easing curve, watch a live animation play it back, start from presets like ease-in-out, and copy the ready-to-paste value. Runs entirely in your browser.
- Box Shadow Generator — Adjust offset, blur, spread, colour, opacity and inset to design a CSS box-shadow, see it on a live preview tile, and copy the exact rule. Runs entirely in your browser.
- CSS Gradient Generator — Design a CSS gradient from multiple colour stops — linear at any angle or radial — see it fill a live preview, and copy the exact background rule. Runs entirely in your browser.
- Tier List Maker — Add labels for the things you want to rank, then drag them into S, A, B, C and D tiers to build a classic tier list — and download it as an image to share. Saved in this browser; nothing uploaded.
- Color Picker & Palettes — Pick a colour and read it as HEX/RGB/HSL, then generate complementary, analogous and triadic palettes plus a shades ramp — copy any swatch. In your browser.
- Colour Blindness Simulator — See a palette or an image as someone with colour vision deficiency sees it — and which pairs of your colours collapse into the same thing. Around one man in twelve has some form of it, so a chart relying on red-versus-green is unreadable to a real share of your users.
- SVG Optimiser — Shrink an SVG by removing Inkscape, Illustrator and Figma metadata, rounding coordinates and squeezing out whitespace — then shows the result rendered so you can see nothing broke. Deliberately conservative: it will not merge paths or strip referenced ids.
- Palette from Image — Extract the palette from any image — the colours that are actually in it, ranked by how much of the picture each covers, with hex, RGB and HSL. Export as CSS custom properties, a Tailwind colour block or JSON. The same image always gives the same palette.