Contents
- Grainient — gradients & backgrounds
- Supahero — website hero sections
- Free Faces — open-license type
- Design skills on Surf Skills
Grainient
Grainient is a library of ready-made gradients and backgrounds. There are over a thousand of them — smooth blends, grainy textures, mesh gradients, animated loops, and AI-generated backgrounds — plus a real-time shader tool if you want to tune your own. Stills go up to 4K–12K and the animated clips run at 2K–4K, so they hold up as full-bleed page backgrounds.
It's freemium: there's a free Freebies section to grab a few without paying, and Pro access (around $59/year or $299 lifetime) unlocks the full library with a commercial license. Reach for it when a page needs a background with some depth and you don't want to open a design tool to build one.
Supahero
Supahero is a curated collection of website hero sections — the top of the page, the part people see first. It's a gallery of 1,000+ real examples pulled from actual sites, with thumbnails and links so you can see each one in context. It's now part of the larger "screensdesign" library.
It's free to browse. This is the one to open before you design a landing page: instead of starting from a blank canvas, you can scroll through how strong heroes are really built — layout, copy placement, imagery — and borrow what fits.
Free Faces
Free Faces is a curated gallery of free typefaces, all available under open licenses. It's organized into six categories — Cursive, Display, Monospace, Sans Serif, Serif, and Slab — with list and grid views so you can scan quickly. You'll spot familiar names like Space Grotesk, Martian Mono, and Atkinson Hyperlegible. It's curated by Simon Foster.
Everything is free, and because the licenses are open, you can use these in real projects without a licensing headache. Reach for it when you want type with a bit of personality but don't want to buy a font family to find out if it works.
When to use which
Three galleries, three jobs. Pull a background from Grainient, study the first screen on Supahero, and pick your type on Free Faces. Bookmark all three and most of the "make it look good" work gets a lot faster.
Design skills on Surf Skills
If you'd rather have an AI agent do some of this work for you, a few related skills in the Surf Skills directory cover similar ground:
- Design With Taste an anti-slop frontend skill: your agent reads the brief, infers the right design direction, and ships interfaces that don't look templated.
- Polish Your UI great interfaces aren't one big thing; they're 16 small details that compound, and this audits a component against all of them.
- Clone Any Website point it at any live URL and get back a clean, pixel-perfect Next.js codebase: real assets, real content, real interactions, not a screenshot.