PickColour · Free
Pick and convert colours in OKLCH, with gamut warnings for sRGB and P3.
Design tools
Small tools for colour, type, motion, icons and layout
51 tools in 12 categories. Each opens in a new tab.
Tools
- Pick
PickTypography · Free
Generates fluid type and space scales that grow smoothly between two viewport widths.
Motion · Free
Draw and animate ASCII art in the browser, frame by frame, and export it.
Backgrounds · Free
Background patterns and gradients as small snippets of Tailwind to copy.
3D · Free
A free low-poly 3D modeller with texturing and animation, in the browser or on the desktop.
SVG · Free
A free set of abstract shapes with grainy gradients, as SVG and React components.
Typography · Free
Font pairings chosen by a model of what pairs well: lock a face and generate its partners.
Typography · Free
Indian Type Foundry's free library of quality typefaces, licensed for personal and commercial use.
Typography · Free
A curated gallery of free typefaces, each shown set in its own specimen.
Motion · Free
A timeline for animating interface components, now free and open source.
Icons · Free
Heroicons that move on hover, as React components to copy.
Icons · Freemium
A very large icon library in several styles, with a free set and a pro one.
Icons · Free
Make app icons and favicons from a clip-art icon, text or a picture, exported for every platform.
SVG · Free
Placeholder logos to drop into a design before the real ones arrive.
Effects · Free
A studio for generative shaders: tune the parameters and export the result.
Images · Freemium
Put screenshots into thousands of device and scene mockups in the browser.
Motion · Free
Write animations in TypeScript and edit their timing in a live editor; open source.
Images · Freemium
A full photo editor in the browser that opens PSD, Sketch and Figma files.
Colour · Free
Colour palettes drawn along lines through colour space between anchor colours you place.
Images · Freemium
Generate and edit images and vector illustrations in a consistent style.
Layout · Freemium
Turn a brief into a sitemap and wireframes, then export them to Figma or Webflow.
Prototyping · Free
Google's tool for generating interface designs and their code from a prompt or a sketch.
SVG · Free
Brand logos as clean SVG files, searchable, with light and dark versions where they exist.
Typography · Free
A catalogue of free and open-source typefaces made by independent designers.
Effects · Freemium
Build WebGL effects and scenes without code, then embed them on a site.
Typography · Free
Upload a picture of lettering and get the typefaces it most resembles.
Accessibility · Free
Build colour systems whose shades hit consistent, accessible contrast ratios.
Motion · Free
Drag the handles of a cubic Bézier easing curve and compare it against others.
Motion · Free
A cheat sheet of common easing curves, with previews and copyable code.
Prototyping · Free
A hand-drawn style whiteboard for quick sketches, diagrams and wireframes.
Backgrounds · Free
A collection of free SVG generators for patterns, gradients, noise and shapes.
Backgrounds · Freemium
Generate SVG backgrounds — waves, blobs, layered peaks and gradients — with live controls.
Icons · Free
Search and copy icons from over a hundred open-source icon sets in one place.
Motion · Freemium
Animate designs in the browser and export videos, GIFs or Lottie files.
Layout · Free
Build CSS Grid layouts visually and copy the generated HTML and CSS.
Motion · Freemium
Find, edit and ship lightweight Lottie animations for web and apps.
Icons · Free
A consistent open-source icon set with packages for most frameworks.
Icons · Free
A flexible icon family in six weights, from thin to duotone.
Colour · Free
Try a palette and type pairing on a live sample website before you commit to it.
Images · Freemium
Remove image backgrounds automatically in a few seconds.
Effects · Free
Create a cohesive set of shadows tuned to your background colour and light source.
Effects · Free
Generate layered, natural-looking box shadows with a few sliders.
Images · Free
Compress and convert images in the browser, comparing codecs side by side.
SVG · Free
Edit SVG path commands point by point and watch the shape update live.
SVG · Free
Optimise SVG files in the browser with a visual preview of every SVGO option.
Prototyping · Free
A fast, friendly infinite canvas for sketching and diagramming together.
Typography · Free
Preview a modular type scale with your own font and ratio, then copy the CSS.
Colour · Free
Turn one brand colour into a full Tailwind-style shade scale from 50 to 950.
Typography · Free
Drop in a font file to see its OpenType features, variable axes and supported characters.
Accessibility · Free
Check a colour pair's contrast and see who it works for across types of vision.
Typography · Free
Type a word and see it set in every font installed on your computer.