The short version
- A gradient palette is a small, named family of gradients made from one base colour palette and a few shared rules.
- Most brands need four to six gradients: a hero, a deep version, a quiet light version, a radial glow, an accent and a calm one for text.
- Gradients read as one family when they share a ground colour, a direction, consistent stop positions and the same steps in lightness.
- Storing gradients as named CSS custom properties keeps them identical across a website, an app and design files.
- A gradient palette should be tested on real formats with real words before it is written into brand guidelines.
On this page
A gradient palette is a small, named family of gradients built from one colour palette and a handful of shared rules, so every gradient a brand uses looks related. Start with five or six base colours, give each gradient a job (hero, deep, quiet, glow, accent, text), then fix the things that make them siblings: the same ground colour, the same angle, matching stop positions and even steps in lightness. Write them down as tokens and test them on real designs before anyone else uses them.
Why a brand needs more than one gradient
A single gradient gets stretched over jobs it can't do. The bright hero blend that looks great on a launch post is too loud behind a paragraph, too dark for a light website section and too busy for a slide full of numbers. Teams then improvise, someone picks a nearby blue, and within a year the brand has fifteen gradients that almost match. A palette prevents that by deciding the variations in advance.
A pile of gradients
- Each made separately, for one design
- Different angles on every page
- Colours that nearly match the brand
- No name, so nobody can ask for one
- Copied by eye from old files
A gradient palette
- Built from one base palette
- One direction, used everywhere
- Exact hex codes and stop positions
- Named by job: hero, deep, quiet
- Stored as tokens in code and files
Start from a base colour palette
Every gradient in the family should be made only from these colours, or from tints and shades of them. If your brand colours aren't settled yet, sort that first with how to choose brand colors. A useful base has a dark ground, two or three steps of the main hue, a near white and one accent from elsewhere on the wheel.
Give each gradient a job
Name gradients by what they do, not what they look like. "Hero" survives a colour refresh; "purple sunset" does not. Six roles cover almost every brand.
How it differs
How it differs
How it differs
How it differs
How it differs
How it differs
The rules that make gradients a family
- One ground. Every dark gradient ends in the same ink, every light one in the same shell. The ground is what the eye uses to group them.
- One direction. Pick an angle, 135 degrees or 160 degrees, and keep it. Mixed angles make a page feel accidental. Gradient angle explains the choice.
- Matching stops. Reuse the same positions (0, 45, 75, 100 percent, for instance) so the transitions have the same rhythm. Gradient stops covers spacing.
- Even lightness steps. Each colour in a blend should be a clear step lighter or darker than its neighbour. Uneven steps produce a bright stripe in the middle.
- One accent, rationed. The accent colour appears in one gradient only. Spread across all of them, it stops being an accent.
- A fixed interpolation for code. If your site blends in oklch, all gradients should, or the same codes will look different between sections.
Turn the gradient palette into tokens
A palette that lives only in a PDF gets retyped and drifts. Store each gradient once as a named custom property and reference it everywhere. Designers can paste the same values into their files, and a future refresh changes one line per gradient. Design tokens covers the wider practice.
:root {
--ink: #14112b;
--plum: #4c1d95;
--violet: #7c3aed;
--orchid: #c084fc;
--shell: #faf5ff;
--ember: #f97316;
--gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
--gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
--gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
--gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
--gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
--gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}
.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }Test it on real formats
Swatches lie. A gradient that looks balanced as a small square can put its brightest band right behind a headline once it fills a 1080×1920 story. Before you publish the palette, make three real designs with real words: a portrait post, a story and a website hero. Check that the text gradient keeps paragraphs readable, using the contrast checks in colour contrast and accessibility, and that hero and deep look related when they sit side by side.
The hero role on a portrait post at 1080×1350.
The same family on a 1080×1920 story. Check that the brightest band still clears the headline in the taller frame.
With Gradiently Pro, the brand kit holds your colour palettes alongside your logo and fonts, and the Designer applies them when it lays out new designs. If your hero gradient is meant to be the thing people recognise, brand gradients covers turning one gradient into a signature.
Questions people ask
What is a gradient palette?
A small, named set of gradients made from one colour palette with shared rules, so they look like one family wherever they appear.
How many gradients should a brand have?
Four to six covers most needs: a hero, a deep and a quiet version, a radial glow, an accent and one calm enough for text. Small brands can start with three.
How do I make gradients look like they belong together?
Use the same ground colour, the same angle, the same stop positions and even steps in lightness across every gradient.
How should I store brand gradients for a website?
Define the colours and each gradient once as CSS custom properties, then reference those names in every component.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile