Design Tools
Generate CSS, palettes, and resize images. 21 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 21 design tools
Image Metadata Viewer
Inspect supported JPEG and PNG metadata before sharing, without uploading the image.
Image Metadata Remover
Remove JPEG and PNG privacy metadata locally while retaining image data and color profiles.
CSS Gradient Generator
Design linear, radial or conic gradients, test text contrast, preview real UI and export the CSS or PNG.
Box Shadow Generator
Design CSS box shadows visually and copy the code.
Color Palette Generator
Build five-color harmonies, lock swatches, check text contrast and export CSS or JSON.
Image Resizer
Resize images to exact dimensions right in your browser.
Color Contrast Checker
Audit layered text, UI controls and palettes against WCAG 2.2, then apply a safer accessible shade.
Favicon Generator
Turn text, emoji or an image into a tested ICO and PNG favicon pack with a manifest and install tags.
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
Add fitted captions over a photo or in white caption bands, then download a private PNG meme.
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
Pick original image pixels by coordinates, inspect HEX and RGBA, and export local swatches.
Image Watermark
Batch-watermark images with text, a logo or both; tile, preview and export locally at full size.
Screenshot Beautifier
Frame screenshots for sharing, add captions, and cover private areas before a local PNG export.
Online Drawing Board
Sketch, add shapes or text, import a picture, undo and redo, then save a 1200 × 800 PNG locally.
Screen Recorder
Choose a screen, window or tab to record locally, pause, preview and download supported video.
CSS Unit Converter
Batch-convert CSS lengths with separate font, percentage and viewport references; export CSV.
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
Convert an Ultra HDR photo to SDR. JPG pixels stay untouched; HEIC and HEIF files are re-encoded once.
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.