Design Tools
Generate CSS, palettes, and resize images. 19 tools
Visual work that ends in code or an asset: building a gradient or a shadow and copying the CSS, generating a palette, checking a colour pair against contrast requirements, resizing and exporting images at the sizes real layouts need.
Contrast is the one to run before shipping rather than after. Text below 4.5:1 against its background fails WCAG AA, and it is far cheaper to catch that here than in an accessibility audit.
All 19 design tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview.
Box Shadow Generator
Design CSS box shadows visually and copy the code.
Color Palette Generator
Generate harmonious color palettes with lockable swatches.
Image Resizer
Resize images to exact dimensions right in your browser.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA.
Favicon Generator
Turn text, an emoji, or an image into favicon PNGs.
Placeholder Image Generator
Create custom-size placeholder images with your own text and colors.
Crop Image
Trim a photo to the part you want, freehand or locked to a ratio like 1:1 or 16:9.
Meme Generator
Put white outlined text over a picture and download it, with nothing uploaded.
CSS clamp() Generator
Build fluid font-size clamp() rules between two viewport widths.
Color Shades Generator
Generate tints and shades of any base color.
Image Color Picker
Upload an image and click anywhere to grab its color.
Image Watermark
Add a text watermark to images — single or tiled.
Screenshot Beautifier
Wrap screenshots in padding, gradient backgrounds, and rounded corners.
Online Drawing Board
Sketch with brushes and colors, then save your drawing as PNG.
Screen Recorder
Record your screen or a window and download the video — no install.
CSS Unit Converter
Convert between px, rem, em, pt, and percent with a base size.
Remove Image Background
Cut the background out of a photo and download a transparent PNG, with the model running on your device.
Remove HDR From Photo
Strip the HDR gain map out of a photo so it stops looking blown out, without re-compressing the image.
What to know before you pick one
Contrast is a measurable requirement, not a matter of taste
The accessibility standard sets a ratio of 4.5 to 1 for normal text and 3 to 1 for large text, and a colour either meets it or does not. This matters beyond compliance: text that measures below the threshold is genuinely hard to read for a large number of people, on cheap screens, and in daylight. Checking is quick, and the fix is usually a small darkening that nobody notices except the people who could not read it before.
Hex, RGB and HSL describe the same colours differently
Hex and RGB are the same information in two notations. HSL is the useful one for making decisions, because it separates hue from saturation and lightness — which means you can darken a colour for a hover state, or desaturate it for a disabled one, by changing a single number instead of guessing at a new hex code.
Resizing and compressing are different operations
Resizing changes how many pixels an image has. Compressing changes how many bytes are used to store those pixels. An oversized photograph on a web page usually needs the first, not the second: no amount of compression makes a 4000-pixel-wide image sensible inside a 600-pixel column, and doing it that way throws away quality to solve the wrong problem.
Placeholder text exists to stop you reading
Lorem ipsum is deliberately meaningless so that people reviewing a layout judge the shape rather than the words. Real copy invites debate about the sentence and hides problems with the spacing. Use it while the design is being decided, and replace it before anyone signs anything off — placeholder text shipping to production is common enough to be a genre of embarrassment.