Design tools.
Screenshots, social images, gradients, scales and placeholders. 11 tools, free, each running in your browser with nothing uploaded.
Every one of the design tools
11 tools.
Screenshot beautifierScreenshots and mockupsDrop, paste or choose a screenshot and set it on a gradient, a mesh or a blurred copy of itself, framed as a window with padding, corners and a soft shadow.
Browser mockup generatorScreenshots and mockupsPut a website screenshot in a browser window with your URL in the address bar, on a gradient or mesh, with a soft shadow and an optional tilt.
Open Graph image generatorSocial imagesDesign the picture a link shows when it's shared, at 1200 × 630, and take its meta tags and a Next.js file with it.
Mesh gradient generatorGradients and backgroundsDrag colored points across a canvas and they blend into a soft mesh gradient, ready as an image, an SVG or CSS.
Placeholder image generatorPlaceholders and avatarsMake a placeholder image at any size, with its dimensions or your own text on it, and download it or copy it as a data URI.
Avatar generatorPlaceholders and avatarsTurn a name into an initials avatar, or any text into a geometric or gradient one, the same every time for the same name.
Type scale generatorType and layoutPick a base size and a ratio and read the whole type scale as a live specimen, then copy it as CSS, Tailwind or fluid clamp() values.
Aspect ratio calculatorType and layoutWork out a width or a height from an aspect ratio, simplify a ratio, and see the common resolutions that share it.
SVG wave generatorSVG shapesMake layered SVG waves for the edge of a section, smooth, peaked or stepped, and copy them as SVG, JSX or a CSS background.
SVG blob generatorSVG shapesMake organic blob shapes from a seed, filled, outlined or layered, and copy them as SVG or a React component.
SVG pattern generatorGradients and backgroundsMake a seamless background pattern and copy it as SVG, a CSS background or a Tailwind class.
Need the product around them? With Pro, your AI agent builds the form, the result card and the rest of the page from a prompt, in your theme.
Get ProOther categories
More free tools. Every category runs in the browser, with nothing uploaded.
Pricing
Free tools, and the product around them with Pro
The tools are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds the product around them.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the design tools can and can't do, how they treat your files and which to pick.
4.9 out of 5 from 150+ developers
Build the product around them
Every block, template and icon, installed by your AI agent in your theme. The tools stay free.
Get Pro