Useful design tools, selected for a specific job.

Palette generator

Generate a four-color palette per spacebar tap or extract one from an image, then export as CSS, PDF, ASE, or Tailwind config.

coolors.co · Freemium

CSS generator

Build linear and radial gradients with a visual editor and copy cross-browser CSS output for free, no account needed.

cssgradient.io · Free

Font library

Search a free, open-source web font library and grab an embed link or download the family files directly, no account.

fonts.google.com · Free

Native shaders

Tune live shader effects and export Metal for SwiftUI or Skia for React Native; Pro unlocks the file exports.

metalforge.xyz · Freemium

Navigation pattern gallery

Browse real navbar designs sorted by type — dropdown, mega menu, sidebar — pulled from live websites for interaction reference.

navbar.gallery · Pricing unknown

Live UI preview

Preview a text, background, and accent color scheme directly on a sample website layout, then export CSS, SCSS, or Tailwind config.

realtimecolors.com · Free

Curated website catalog

Browse a manually reviewed catalog of launched products and websites for design and positioning inspiration, free to browse.

sitehunter.net · Free

Font inspector

Drop in a font file to see every OpenType feature and variable axis it supports, all processed locally in the browser.

wakamaifondue.com · Free

Collection + classic generator

Browse 180 free linear gradients and copy CSS instantly, or unlock PSD, Sketch, and Figma packs with an Itmeo account.

webgradients.com · Free

Color wheel + theme extraction

Build a color-wheel theme or extract one from an uploaded image for free; saving it to a Creative Cloud library needs a free account.

color.adobe.com · Free

Collection

Browse a daily-updated, community-voted collection of four-color palettes and click any swatch to copy its hex code.

colorhunt.co · Free

CSS generator

Pick two or three colors and an orientation to generate a linear-gradient CSS snippet, free and without signing in.

mycolor.space · Free

Palette generator

Generate a four-color palette per spacebar tap or extract one from an image, then export as CSS, PDF, ASE, or Tailwind config.

coolors.co · Freemium

Palette gradient generator

Blend multi-stop color gradients and export as CSS, SVG, PDF, or Tailwind config; saving gradients needs a free account.

coolors.co · Freemium

CSS generator

Build linear and radial gradients with a visual editor and copy cross-browser CSS output for free, no account needed.

cssgradient.io · Free

Broad directory

Browse a broad directory of curated tools and resources across design disciplines, organized by category.

curations.supply · Pricing unknown

Font manager

Organize, preview, and activate font collections from a free desktop manager for Mac, Windows, and Linux.

fontba.se · Freemium

Font inspector

Drag an OTF, TTF, or WOFF file into the browser to inspect its name table, character set, and glyph outlines.

fontdrop.info · Free

Pairing generator

Generate contrasting font combinations from a neural net, lock the ones you like, and keep regenerating the rest.

fontjoy.com · Free

Pairing

Browse curated Google Fonts and Fontshare pairings for headings and body text; a free account unlocks the full library.

fontpair.co · Freemium

Font library

Download Indian Type Foundry's in-house typefaces as desktop OTF or web TTF/WOFF/WOFF2 kits, including variable styles.

fontshare.com · Free

Font library

Search a free, open-source web font library and grab an embed link or download the family files directly, no account.

fonts.google.com · Free

Collection

Browse a community-curated feed of trending color gradients updated daily and grab the ones that fit your palette.

gradienthunt.com · Free

Background generator

Generate SVG or PNG backgrounds — waves, blobs, low-poly grids, and blurry gradients — with no signup and no credit card.

haikei.app · Free

Design inspiration gallery

Browse a hand-picked library of website designs organized by visual style and industry, no account needed.

httpster.net · Free

Accessible palette builder

Hand-tune every tint and shade of a brand palette while checking WCAG contrast pairs live, then export for Tailwind or CSS.

inclusivecolors.com · Pricing unknown

Animated mesh generator

Preview five animated WebGL mesh shaders at 60fps and export PNG for free, or unlock 4K, MP4, and React/CSS code with a paid pass.

instantgradient.com · Freemium

Mesh generator

Randomize a palette into an organic multi-point mesh blend and export it as SVG, PNG, or JPG for hero sections and posters.

magicpattern.design · Pricing unknown

WebGL mesh editor

Drag points on a WebGL canvas to warp organic mesh gradients built from shaders, then export the result as an image.

meshgradient.com · Pricing unknown

CSS mesh generator

Drag control points to shape a mesh gradient and copy the generated CSS — no image export or design file involved.

csshero.org · Free

Native shaders

Tune live shader effects and export Metal for SwiftUI or Skia for React Native; Pro unlocks the file exports.

metalforge.xyz · Freemium

Navigation pattern gallery

Browse real navbar designs sorted by type — dropdown, mega menu, sidebar — pulled from live websites for interaction reference.

navbar.gallery · Pricing unknown

Live UI preview

Preview a text, background, and accent color scheme directly on a sample website layout, then export CSS, SCSS, or Tailwind config.

realtimecolors.com · Free

Design inspiration gallery

Scroll a lightweight, dated feed of recently published sites, apps, and branding work — the site formerly known as Godly.

recent.design · Free

Curated website catalog

Browse a manually reviewed catalog of launched products and websites for design and positioning inspiration, free to browse.

sitehunter.net · Free

Type scale builder

Set a base size and ratio to build a responsive type scale from any Google Font and copy the generated CSS.

typescale.com · Freemium

Collection

Scroll a handpicked library of two-color gradients and copy the hex stops or CSS, with a matching Figma plugin.

uigradients.com · Free

Font inspector

Drop in a font file to see every OpenType feature and variable axis it supports, all processed locally in the browser.

wakamaifondue.com · Free

Collection + classic generator

Browse 180 free linear gradients and copy CSS instantly, or unlock PSD, Sketch, and Figma packs with an Itmeo account.

webgradients.com · Free