Design Tools & Generators

Suite of roughly seventy single-purpose SVG generators covering noise, grain, waves, blobs, patterns, spirals and gradients.

Library of parametric seamless SVG patterns with per-pattern controls for stroke, scale, spacing, rotation and colors.

Generates smooth CSS gradients with selectable interpolation colour space (LRGB, HSL, HCL, LAB), easing curve and stop precision.

Support chart for CSS and web platform features, showing what is safe to ship today.

Generates glitchy, displaced shape backgrounds with RGB-split and slice effects as SVG.

Generates background scribble textures as lightweight SVG line art, with controls for density, roughness and stroke weight.

Generates futuristic glowing neon SVG shapes with layered blur and stroke controls.

Converts an SVG path into an equivalent CSS clip-path or mask so shapes stay resolution-independent.

Marketplace selling typefaces while still in progress at reduced prices, with free upgrades as the family develops.

Free illustration packs specifically depicting Black people, created to fix representation gaps in stock illustration.

Editor for PWA maskable icons showing live previews across Android icon mask shapes with safe-zone guides.

Generates spill and melting-drip SVG shapes for section dividers, overlays and playful page transitions between colour blocks.

Generates custom colour palettes from a chosen base colour, with exportable swatches and copyable CSS variable output.

Generator for unlimited grainy, animated and AI-assisted gradient backgrounds with high-resolution export.

Studio for generating animated and static background gradients and visual effects, exportable for web use.

Archive of typography in the wild, indexed by typeface, industry and format, with editorial notes from type experts.

Animated variants of the css-pattern collection: moving CSS-gradient backgrounds with no JS or images.

Spacebar-driven palette generator with 10M+ browsable palettes, image colour extraction, contrast checking, gradient tools and palette mockup previews.

Generates SVG spiral wave shapes with adjustable turns, stroke thickness and taper, useful as decorative background art.

Creates vanishing-point perspective grids exportable as SVG for retro and synthwave layouts.

Pattern generator based on the classic 10 PRINT maze algorithm, output as tileable SVG.

Curated overly descriptive color palettes with names and hex codes, built as a design-inspiration source rather than a generator.

Produces ornamental CSS frames around images using masks and gradients instead of images.

Generates SVG wave dividers with controls for amplitude, complexity and randomness, exportable as markup or file.

Interactive course and playground on building playful, physical web animations, with runnable demos throughout.

Builds custom palettes in the HSLuv color space with live WCAG and APCA contrast checks, exporting to Tailwind, CSS and Figma.

Free generator for animated three-dimensional gradient backgrounds with a live editor and web export.

Library of AI-generated 3D shape renders, free to download and drop into layouts.

Mix-and-match illustration system for human figures with swappable heads, bodies, poses and clothing.

Tailwind palette generator that builds full colour scales from one hex and previews them across cards, dashboards and full pages.

Public-domain vintage engravings and etchings, cleaned and vectorised, from the Heritage Type archive.

Interactive reference where every CSS selector is demonstrated live against a sample DOM you can modify.

Generates isometric 3D-looking SVG patterns from tileable motifs, with control over tile size, angle and colour.

Editor for faking screens of forty-plus apps — iMessage, WhatsApp, Instagram, Discord, ChatGPT — and exporting them as images or video.

Interactive OKLCH picker showing the P3 and sRGB gamut slices live, so you can see which colors are unreachable.

Isometric scene builder that stacks and arranges isometric blocks into an exportable SVG illustration, no 3D tool needed.

Trains on colors you personally like, then generates unlimited palettes, gradients and type samples in your own taste.

Produces soft-UI dual-shadow CSS with controls for distance, blur, intensity and surface color contrast.

Pick colors by dragging across a hue field and instantly get monochromatic, analogic and triadic sets with lightness control.

Evil Martians generator that produces color scales with matched perceptual contrast across hues using OKLCH and APCA math.

Side-by-side comparison of monospace coding typefaces rendered in a real code sample with ligature toggles.

Single-purpose generator producing volumetric god-ray light beam graphics with adjustable angle, spread and colour.

Supersized collection of CSS custom properties covering colour, easing, shadows, gradients and animations.

Generates smooth random organic blob shapes with complexity and contrast sliders, exportable as SVG.

Generates CSS-only section dividers — waves, zigzags, arrows — that scale without image assets.

Around thirty thousand tagged colour palettes with one-tap hex copying, favourites, image-to-palette extraction and JSON export.

Renders any word in every font installed on your machine at once so you can pick a wordmark visually.

Two-color pairing tool that shows every combination rendered as real UI so you can judge legibility, not swatches.

Paste a palette and preview it instantly on a full fake landing page, with export to Tailwind, CSS variables and Figma.

Generates CSS-only decorative borders — corner brackets, partial frames and offset outlines — with no extra markup.

Generates the full favicon and app-icon set across platforms with per-platform previews and an HTML snippet.

Credit and debit card React component with automatic brand detection and a 3D flip interaction.

Generates device-framed product screenshots with configurable perspective, background and shadow, exporting high-resolution PNG.

Free sketch-style illustrations of people in poses, editable and recolorable, released with no attribution requirement.

Generates CSS ribbon and banner shapes for badges and callouts using single-element techniques.

Icon family of about nine thousand glyphs across six weights including duotone and fill, with packages for most frameworks.

Generates deterministic SVG avatars from a name string in several geometric styles, as a React component or API.

Drop a font file in and get every OpenType feature, variable axis, glyph and language it supports, with live testing.

Browser image compressor handling JPEG, PNG, SVG, GIF and WebP with lossy or lossless modes, resizing and EXIF stripping.

JavaScript library that generates colors from a target APCA contrast value instead of picking a color and checking after.

Generates randomised creative briefs by discipline and industry — logo, branding, packaging, illustration — and exports them as PDF or image.

Grid pattern generator covering dot, line, cross and mixed grid backgrounds as SVG.

Generates SVG shapes converging on a vanishing point for depth and tunnel effects.

Combines soft color blobs with an SVG noise filter to produce the grainy gradient backgrounds used across modern landing pages.

Builds tunable wavy edge dividers in pure CSS with amplitude and frequency controls.

Generator producing complex CSS clip-path and shape-outside values with a visual point editor.

Over five thousand consistently stroked SVG icons on a 24px grid with filled variants and framework packages.

Visual editor for the eight-value border-radius syntax, producing organic squircle and blob shapes from real CSS.

Generative random-color explorer with perceptual distance controls, color-blindness preview and a genuinely playful interface.

Creates soft blurry blob background shapes exportable as SVG, sized and coloured in the browser.

One agent skill with twenty commands plus a curated list of frontend design anti-patterns to avoid.

Generates mathematically exact 10% tints and shades of a hex color, the way brand guidelines usually specify them.

Produces fluid, turbulence-displaced SVG gradient backgrounds using feTurbulence filters, with live colour and distortion controls.

French libre type foundry releasing experimental, characterful open-source typefaces used widely in cultural design work.

Converts images to dithered, halftone-style output with control over algorithm, dot size and palette.

Open-source library of 3D rendered icons in multiple styles and camera angles, free in PNG and Blender source.

SVG wave generator producing layered wave dividers and backgrounds with adjustable amplitude and complexity.

Gallery of layered box-shadow recipes that create gradient-like glows, each copyable as plain CSS.

Generates notched, scooped and cut-corner CSS shapes on a single element, without pseudo-element hacks or image assets.

Claymorphism-style emoji maker producing soft 3D clay emoji as downloadable artwork, with adjustable colour and lighting.

Generates organic blob shapes as CSS border-radius or clip-path values, so blobs stay resolution-independent and animatable.

Free grunge and vintage texture overlays supplied as ready-to-use image assets for adding wear to flat interfaces.

Generates speech-bubble and tooltip shapes with arbitrary tail position and border in pure CSS.

Interactive CSS Grid builder supporting named areas, nested grids and live HTML plus CSS export.

CSS library that styles the web to look and behave like a terminal user interface, with proper character grids.

Generates low-poly triangle mesh backgrounds from a seed and palette, available as a site and a JS library.

Self-hostable npm packages for open-source fonts, including variable and subset builds, so you avoid third-party font CDNs.

Icon set of programming language, framework and tool logos in original-color and plain variants, as font and SVG.

Screenshot beautifier with device frames, browser chrome, backgrounds and templates, plus an API for automated generation.

Generates multi-stop CSS gradients that follow an easing curve, eliminating the grey mush in the middle of fades.

Encodes SVG markup to Base64 or URL-encoded form for use in CSS background-image.

Hand-drawn illustration library of mix-and-match people components, free for commercial use, also available as a Figma file.

Serves a random single-element CSS loader on each visit as a browsing interface into the 600-loader set.

Single-weight open-source icon set of around three hundred icons, deliberately small and consistent, with React and Vue packages.

Generates starburst and sunburst CSS shapes with adjustable spike count and depth.

Interactive playground for designing layered box shadows and exporting them for both web CSS and React Native.

Generates iridescent holographic background gradients with adjustable hue sweep and grain.

Generates multi-colour gradient box-shadows in pure CSS with live preview and copyable output.

Hand-drawn doodle collection delivered as editable vector SVG assets you can recolour and combine into illustration sets.

Free hand-made icon set from Visiwig with unusual, characterful shapes distinct from standard icon libraries.

SVG arrow maker for hand-drawn and geometric pointer shapes with adjustable curvature.

Cyberpunk-inspired SVG background generator combining horizon grids, glow gradients and scan lines into a single exportable file.

Desktop-grade web app for building color scales in LCh with live APCA contrast readouts and Figma-ready export.

HEX, RGB and HSL colour picker with harmony suggestions and copyable CSS values.

Enter a foreground and background pair and see, per vision-type, which real groups of people can actually read it.

Confetti and burst SVG generator producing celebratory particle arrangements as static vector art for success and empty states.

Companion tool generating a fluid spacing scale with one-up pairs, giving consistent responsive gaps from clamp values.

Generates a type scale that interpolates smoothly between two viewport widths, outputting CSS clamp custom properties.

Working library of interface patterns and details for people designing with deliberate, uncommon care.

Free device mockup generator covering a very long tail of phone, tablet, laptop and TV models including older hardware.

Generates fractal-glass refraction distortion overlays that can be applied to images and backgrounds.

ByteDance icon system where a single SVG source can be rendered in outline, filled, two-tone or multi-color themes.

Browser-based collaborative 3D modelling tool built around soft, blobby, designer-friendly modelling.

Generates soft watercolour-style background washes as SVG using layered filter effects.

Fully customisable open-source SVG icons where stroke width, size and corner radius are adjustable before download.

Generator for repeating SVG shape grids with control over spacing, rotation and scale.

TypeScript language giving LLMs hand-drawn primitives, IK rigging, camera and particles; renders deterministically via rough.js and GSAP.

Fully open-source icon library of over sixteen hundred icons with a consistent grid, no premium tier and no attribution.

SVG stroke and line generator for decorative rules, underlines, connectors and dividers, with adjustable curvature and thickness.

Organic blob shape generator producing editable SVG paths, with sliders for complexity, irregularity and corner smoothing.

Terminal, chart, heatmap and UI palettes engineered to stay distinguishable after aggressive Redshift or Night Shift warm-screen filtering.

Open-source skill files that steer AI coding agents toward better frontend visual and interaction decisions.

Open-source utility that batch-generates App Store and Play Store screenshot sets from source images and templates.

Browser font inspector that reads glyph coverage, metrics and OpenType data from a dropped file with no upload.

Open-source tool for creating animated product mockups and device-framed videos entirely in the browser.

Browser studio that turns artwork into holographic foil stickers with interactive tilt-reactive shine.

Browser tool for measuring and inspecting interface spacing, sizes and rhythm directly on live pages.

Serves a random modern-CSS technique with runnable demo, as a daily learning surface.

Set of agent skill files aimed at polishing interfaces produced by AI coding agents.

Turns code snippets into styled screenshots with themes, window chrome, backgrounds and adjustable padding.

Surreal hand-drawn illustration collection with a deliberately strange visual language, free and paid tiers.

Open-source UI component set built around fluid, functionalist motion and layout principles.

Icon aggregator with cross-set search, live color and stroke editing, and export to SVG, PNG or component code.

Collection of minimal modern CSS layout and component solutions, each just a few lines with live demos.

Generates CSS linear() easing functions and keyframe blocks for non-cubic-bezier curves like bounces and springs.

Live editor for Satori-based OG images where you write JSX and see the rendered social card update instantly.

Written breakdown of the AI chat input component — attachments, modes, model pickers, send states — with annotated examples.

Open-source pack of hand-drawn doodle objects and characters in SVG and Sketch, free for any use.

Configurable React component that animates a light beam travelling around an element's border, with live controls and copyable code.

Randomised client briefs for logo, web, UX, graphic design, illustration and writing, with a feedback board for finished work.

Ongoing catalogue of real websites annotated with the exact fonts used, plus font-pairing and alternative recommendations.

Icon set drawn specifically for dense product interfaces, with an unusual visual restraint and steady release cadence.

Purpose-built generator for mathematically precise SVG sine waves with frequency, amplitude and phase controls.

Convert, generate and explore OKLCH colours and build perceptually even palettes from them.

Thirty-one visual styles rendered from identical data, each paired with the AI prompt needed to reproduce that aesthetic.

Tailwind CSS plugin that adds proper gradient borders without the usual pseudo-element and background-clip hacks.

Free-for-commercial-use typeface library from Indian Type Foundry, with variable fonts and full family downloads.

The original open-source type foundry, still shipping well-hinted free webfont families with proper licensing.

Plain-language glossary of AI interface and model terminology aimed at designers and design engineers.

Interactive mini-course teaching SVG animation techniques with editable inline examples.

Library of 700+ curated UI sound effects packaged for use in modern web applications.

Alternative layered box-shadow generator with light-source positioning and a live preview on a configurable surface.

Abstract holographic background generator producing layered iridescent SVG artwork you can recolour and export at any size.

Converts spring physics parameters into a CSS linear() easing string you can paste straight into a transition.

Non-exhaustive checklist of concrete details that separate a good web interface from a mediocre one.

Generates deterministic identicon-style avatars from a wallet address or username, no server or storage needed.

Living manual of interface craft covering design principles, motion, spacing and component behaviour.

Agent skill that turns one brand hex into OKLCH ramps, WCAG-checked semantic tokens, and Tailwind or CSS output offline.

Copy any app UI into plain HTML artboards on a local canvas with measured colors and metrics, no design tool required.

Claude Code skill that writes themable SVG product illustrations in one family from a feature description.

Figma plugin that turns any layer into a WebGL holographic sequin sticker with die-cut edge and foil presets.

Twenty LuaLaTeX and MetaPost examples of vintage scientific-paper aesthetics: plates, star charts, log tables, knots.

Rust CLI that builds an icon font and matching stylesheet from a folder of SVG files, with a live glyph preview.

Curated font pairings for Astro with one-command install via the Astro Fonts API, Tailwind or plain CSS.

Collection of 33 free, single-purpose generative design tools for patterns, backgrounds, posters and textures — all run in-browser with no accounts or uploads.

MIT 24×24 SVG icon set in five styles (duotone, light, regular, solid, editor) as React packages, with a Figma source.

Compiler-driven icon set for agents, MCP and RAG, with six validated drawings per concept and an MCP server of real names.

Browser font creator and SwiftUI package that draws letters from real pen strokes, keeping original stroke order and timing.

Client-side PNG-to-SVG vectorizer with per-colour Potrace-class curves, seam-free cutouts and centerline tracing for vinyl and plotters.

Chrome extension that scans a rendered web UI's observable styles, states and icons, plus a Figma plugin that rebuilds them as editable variables and components.

Browser tool that turns uploaded artwork into a postage stamp: perforation gauge, aged paper, struck postmark, exported as transparent PNG.

Browser vector workspace that reshapes icons from Tabler, Lucide, Phosphor, Iconoir and Heroicons into custom app icons, exporting SVG or PNG.

Browser generator for topographic contour-line patterns with adjustable parameters and export, for backgrounds, posters and section dividers.

251 UI layout prompts across 15 page-section categories — auth, pricing, dashboards, onboarding — each with a preview and copy-paste Tailwind markup.

Type marketplace carrying 250,000+ fonts from independent designers and foundries, with one-time desktop and web licensing and no subscription.

Searchable front-end for 250,000+ open-source icons across 150+ sets, with colour and stroke customisation and SVG, PNG, React or Vue export.

Minimal icon set drawn for interface work, with a browsable library, changelog and per-icon requests.

Zero-dependency WebGL library for animated mesh-gradient backgrounds: seamless loops, mounts to any element, exports frames.

Archive of every solid desktop background colour shipped by classic operating systems: 194 colours across 22 platforms, 1985 to 2024.

Color system builder that generates full tonal scales from a few seeds and checks WCAG and APCA across every pairing.

Tests a categorical chart palette for color-blind confusion, low-contrast pairs, and how it reads at small mark sizes.

Drop-in privacy-respecting replacement for the Google Fonts API with an identical URL structure and no tracking.

Drops screenshots into clean device frames in a range of colors and orientations, exporting transparent PNG.

Generates superellipse squircle shapes as SVG with curvature, rotation and gradient fill controls.

Small open-source foundry producing carefully drawn free typefaces, each with full documentation of its design intent.

Mesh gradient designer with draggable color points, blur controls and export to CSS, PNG or SVG.

Rapid-fire font discovery that shows one random typeface at a time so you judge by feel instead of scrolling a grid.

URL-based API that deterministically generates a unique robot, monster or cat avatar from any string.

Side-by-side tool for matching a web font's metrics to a fallback font to eliminate layout shift on load.

Overlays two typefaces on top of each other so you can see exactly where their letterforms differ.

Draw a grid visually by setting columns, rows and gaps, then drag child areas and copy the generated CSS.

Side-by-side variable font specimen tester with per-axis sliders and instant CSS font-variation-settings output.

Browser-based 3D mockup generator that maps your artwork onto rotatable 3D device and object models.

Lyft's tool for generating color ramps by curve-editing hue, saturation and luminosity independently across the scale.

Generates seamless SVG and CSS background patterns from configurable primitives, with a fully offline-capable interface.

Free pack of realistic device and browser frames as editable Sketch and Figma assets for compositing screenshots.

Edits existing palettes by plotting hue, saturation and brightness curves, letting you smooth an inherited messy color set.

Collection of hand-drawn style SVG patterns with a live color editor, from the LS Graphics studio.

Builds layered multi-step box-shadows that approximate real light falloff, with sliders for spread, opacity and easing.

Icon set of seven hundred icons built entirely from CSS with no SVG or font, also available as SVG and React.

Open-source clamp-based type scale generator with configurable ratios, naming, rounding and direct CSS or Sass export.

Illustration builder with combinable hand-drawn objects and gradient backgrounds, editable directly in the browser.

Free, accurate vector device templates for phones, tablets, laptops and wearables, maintained by Meta's design team.

Search interface across two hundred thousand icons from every Iconify set, with copy as SVG, JSX, or component.

Library of section-divider shapes with flip, invert, height and layering controls, output as inline SVG plus CSS.

Web generator for the Avataaars illustrated character set, free for commercial use and downloadable as SVG.

Curated set of animated and static CSS gradient backgrounds, each copyable as pure CSS with no images.

Generates sequential and diverging palettes for charts, interpolating in a perceptual space so steps read as even.

Uses a machine-learning model trained on real designs to generate palettes constrained to a chosen layout or brand context.

Type any word and get the dominant colors from image search results, turning language directly into hex values.

Floating React control panel with sliders, toggles and colour pickers for tweaking values live in a running app.

Generates a complete set of CSS custom property design tokens for colour, type and spacing from a few inputs.

Converts screenshots into browser or phone mockups with 3D tilt, gradient backdrops and instant download.

Node-level editor for raw SVG path data with live command list, transforms, arc visualisation and path optimisation.

Experimental interface for variable fonts with novel axis controls, letting you explore designspace beyond simple sliders.

Curated index of libre typefaces designed by women and non-binary type designers, with direct source links.

Curated library of contemporary free and libre typefaces, presented as a proper type catalogue rather than a download farm.

Visual editor for fluid type that graphs the clamp curve as you drag, making the math visible instead of guessed.

Mesh gradient generator with noise and grain overlays, exporting PNG or CSS-ready output at chosen resolution.

Drag-and-drop clip-path editor supporting polygon, circle, ellipse and inset with live CSS output over your own image.

Neutral-style icon system of over two thousand icons designed as a matched set in both line and fill variants.

Three thousand free medical and biological illustrations covering anatomy, cells and lab equipment, licensed CC BY.

Generates self-hosting bundles for any Google Font: woff2, woff, ttf, eot files plus the matching @font-face CSS.

Minimal matrix that cross-checks every color in a palette against every other for WCAG contrast in one glance.

Palette and gradient generator that expands a single input colour into matching schemes, including three-colour gradient output.

Free SVG background generator covering waves, polygons, blobs, grids and noise with per-shape parameter control.

Free and paid illustration packs from a single illustrator, with a consistent line and character style across sets.

Open-source icon set with a distinct rounded geometry, available in line and fill, with framework packages.

Desktop app that renders 3D animated device mockups and screen recordings with real camera moves and lighting.