Brand Gradients

Gradients inspired by the products you use every day, built from each brand’s public colours. Copy any one as CSS, Tailwind or a Figma token.

297 gradientsCSS · Tailwind · Figma

Brand Gradients

All brands A–Z → 297 gradients · page 12 of 13
Rolex

Rolex

Chanel

Chanel

Gucci

Gucci

Adidas

Adidas

Nike

Nike

Tesla

Tesla

Amazon

Amazon

PayPal

PayPal

Shopify

Shopify

Twitch

Twitch

Discord

Discord

Notion

Notion

Figma

Figma

Uber

Uber

Slack

Slack

Stripe

Stripe

Airbnb

Airbnb

Netflix

Netflix

Microsoft

Microsoft

Google

Google

Apple

Apple

About brand gradients

Brand gradients are the largest part of the library because they are the hardest to get right by eye. A screenshot loses the color profile, and a gradient picked from a compressed PNG drifts a few points off on every stop. Each one here starts from the brand’s publicly visible colours and is stored as hex values. They are references, not official assets: colours are approximate, brands change them, and none of these brands is affiliated with or endorses The Gradients.

Use them for mockups, case studies, competitive decks and design research — the places where being approximately right is worse than being obviously different. If you need a gradient that evokes a brand without copying it, start from one here and shift the hue range in the Gradient Generator.