New Grainy gradients

Beautiful gradients, inspired by the world's top brands

Copy CSS, Tailwind, and Figma tokens in one click. Free, no signup.

All BrandCuratedSeasonalUI
All moods WarmCoolBoldPastelDarkNeonNeutral
Inspired by
InstagramSpotifyStripeFigmaDiscordDuolingoAirbnbTwitchSlackMessengerMastercardLyftSnapchatDribbbleTelegramNetflixShopifyLinear

Browse by colour

Search any hex →
Red 148 Orange 140 Yellow 85 Green 110 Teal 132 Blue 195 Purple 117 Pink 119

All gradients

695 gradients
Puma

Puma

Peloton

Peloton

Klarna

Klarna

←1…222324…29→

Build your own

All tools →

Gradient Loader Generator New

Loading spinners in gradient colours — ring, orb, pulse, dots or bar. Pure CSS.

Gradient Generator

Build a linear, radial or conic gradient — up to five stops, CSS, Tailwind and SVG.

Mesh Gradient Generator

Drag colour points around a canvas, then export PNG or SVG.

Animated Gradient Generator

Add motion, and get the keyframes with a reduced-motion fallback.

Gradient Text Generator

Put a gradient on a headline, with the contrast checked for you.

Glassmorphism Builder

Frosted glass panels — blur, tint and border in one block of CSS.

Gradient from Image

Drop in a photo and turn its colours into a gradient — nothing leaves your browser.

Explore the library

By type

BrandCuratedSeasonalUIBrands A–ZGrainyNewGradient of the daySurprise me

By mood

WarmCoolBoldPastelDarkNeonNeutral

By industry

TechMediaFinanceFashionFood

By colour

RedOrangeYellowGreenTealBluePurplePinkColour pairsAny hex code

About the library

A reference library rather than a gallery: gradients inspired by the world’s top brands, plus curated, seasonal and UI palettes, each stored as exact hex values.

Brand gradients are built from each brand’s publicly visible colours, so you start from the right palette instead of eyeballing a compressed screenshot.

Inspired by those brands, not supplied by them: colours are approximate and may differ from official brand guidelines. We are not affiliated with any brand shown.

Four ways in

Browse by type, by mood, by the industry a brand belongs to, and by colour.

Copy-ready code

Every gradient gives you production-ready CSS, a Tailwind class and a Figma token, copied in one click.

A growing set of generators

Linear, radial and conic gradients, mesh, motion, borders, text, wallpapers and more — every tool exports real, copy-ready code.

Free to use

No signup and no attribution needed, for personal or commercial work. The text generator even reports the worst-case contrast ratio so a headline stays readable.