# 60 gradient colour combinations that work, with codes

[Canonical HTML page](https://gradiently.design/guide/gradient-color-combinations)

Sixty gradients, sorted by the feeling you want rather than by hue. Every one is a live CSS code you can copy, and each group explains the rule that makes its blends work.

## The short version

- The best gradient colour combinations either use neighbouring hues, which blend cleanly, or bridge distant hues with a chosen middle colour.
- Calm gradients keep lightness and hue close together; bold gradients push saturation and hue distance.
- Dark gradients work best as a near-black ground with one lit colour, and pastel gradients work best as pale neighbours with a dark ink for text.
- Choosing a gradient by mood first, then by hue, gives more consistent results than picking colours you like one at a time.
- Any combination here can be made more distinctive with a third colour, a different angle or a layer of grain.

The best **gradient color combinations** follow one of two rules: they use hues that sit next to each other on the colour wheel, so the blend stays clean, or they bridge distant hues with a chosen middle colour, so it never turns grey. Below are 60 combinations that follow those rules, grouped by mood: calm, bold, warm, cool, dark and pastel. Copy any swatch as CSS, then read the note under each group to see why they work, so you can make your own.

Everything here is plain CSS with hex colours, so it works in any browser, and the same codes can be typed into any design tool. If a term is new, [what a gradient is](https://gradiently.design/guide/what-is-a-gradient) explains stops and angles.

## Calm gradient combinations

Calm gradients keep their colours close in both hue and lightness. Nothing jumps, so the eye rests. They make good backgrounds for reading, wellbeing brands, portfolios and anything that should feel quiet. Sage and stone, for example, moves only a small distance around the wheel and loses a little lightness as it goes, which reads as shade on a wall rather than a colour effect.

- Sea glass: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Morning fog: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Sage and stone: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Lavender dusk: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Still water: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Sandbar: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eucalyptus: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Slate blue: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Oat milk: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Moonstone: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Calm: one hue family, small steps in lightness. They carry dark text easily.

## Bold gradient combinations

Bold gradients use saturated colours and more distance around the wheel. They grab attention on a crowded feed, a sale banner or a launch page. The trick is choosing pairs whose straight blend stays bright. Magenta to amber passes through coral; cobalt to coral passes through purple. Neither goes near grey, which is why they look vivid all the way across.

- Electric violet: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Hot citrus: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Tropical punch: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Signal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Ultramarine flare: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Magenta to amber: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Jungle: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Cobalt and coral: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Grape soda: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Lime and teal: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Bold: high saturation, pairs chosen so the midpoint stays bright. Use white text on the darker end.

## Warm gradient combinations

Warm gradients live between red and yellow and feel sunny, appetising and human. They suit food, hospitality, lifestyle and anything personal. Most of these add a darker, redder end so the blend has weight: Golden hour runs from pale honey to burnt amber the way late light moves down a wall. For the psychology of temperature, see [warm and cool colours](https://gradiently.design/guide/warm-and-cool-colors).

- Golden hour: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terracotta: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Peach sorbet: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Ember: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Desert rose: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Honey: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Cinnamon: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Sunset strip: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Apricot and plum: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Brick and gold: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Warm: red, orange and yellow neighbours, usually with a darker end for depth. For more, see [sunset gradients](https://gradiently.design/guide/sunset-gradient).

## Cool gradient combinations

Cool gradients sit between green and violet and feel clean, calm and precise. They are the natural home of technology, health, finance and water. Blue is the anchor of most of them, which is why they look trustworthy, and why a cool gradient needs a distinctive detail, such as a violet end or a teal shift, to avoid looking like every bank. More blues are collected in [blue gradients](https://gradiently.design/guide/blue-gradient).

- Glacier: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Deep lagoon: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nordic: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Indigo night: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Mint to sky: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Periwinkle: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Arctic teal: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Blue hour: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Ice violet: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Ocean depth: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Cool: green, teal, blue and violet neighbours. A slight hue shift makes them feel less corporate.

## Dark gradient combinations

Dark gradients are near-black grounds with one lit colour rising out of them. They feel premium, nocturnal and cinematic, and they make white type look sharp. Keep the dark end slightly coloured rather than pure black, so the blend has something to travel through. Dark ramps band easily, so add grain before you publish; see [dark gradient backgrounds](https://gradiently.design/guide/dark-gradient-backgrounds).

- Midnight violet: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Deep sea: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Forest floor: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Oxblood: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Graphite: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Ink and ember: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Petrol: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Aubergine: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Night teal: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Dark cherry: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Dark: a tinted near-black, a deep middle and one lit colour at the far end.

## Pastel gradient combinations

Pastels are pale, high-lightness colours with a little saturation. They feel fresh, soft and friendly, and they suit beauty, baby, stationery and spring campaigns. Because they are all so light, even distant pastel hues can blend into a whitish grey, so the last two here route through a pale lilac. Set text on pastels in a dark ink rather than white. There is more in [pastel gradients](https://gradiently.design/guide/pastel-gradients).

- Cotton candy: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Peach and lilac: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistachio: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Baby blue: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Lemon and blush: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Mint and cream: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Powder violet: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sherbet: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Seafoam and rose: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Dawn sky: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastel: pale neighbours, or distant pastels bridged by lilac so the middle stays tinted.

## How to use these gradient codes

Each code is a complete CSS `background` value. Paste it on any element, or read the hex colours and stop positions into a design tool. On the web, set a solid fallback colour first, taken from the darkest or most important stop.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Midnight violet on a card, with a fallback colour and white text.

## How to make your own combination

1. **Pick the mood first** Decide calm or bold, warm or cool, dark or light before any colour. It narrows the choices to one of the groups above.
2. **Choose an anchor colour** Usually your brand colour or the colour of the thing you are selling. See [how to choose brand colours](https://gradiently.design/guide/how-to-choose-brand-colors).
3. **Add a neighbour** Move 30 to 60 degrees around the colour wheel for a clean second colour. Change lightness a little too, for depth.
4. **Bridge anything distant** If you want a far-away hue, put a bright middle colour between them so the blend doesn't go grey. See [muddy gradients](https://gradiently.design/guide/muddy-gradients).
5. **Make it yours** Change the angle, move a stop off 50%, add a third colour or a layer of grain. Small changes are what stop a combination looking like a preset.

A popular code is a good start, but thousands of other designs start there too. If you want a gradient identity nobody else holds, you can match a picture you love to its palette and the closest Marks, or make new ones like it.

## FAQ

### What colours go well together in a gradient?

Colours next to each other on the colour wheel, such as blue and violet or orange and pink, always blend cleanly. Distant colours work when a bright middle colour bridges them.

### What is the most popular gradient combination?

Violet to pink and blue to cyan are among the most widely used. That popularity is also why they rarely look distinctive.

### How many colours should a gradient have?

Two is simplest, three gives depth and control over the midpoint, and more than five is hard to keep clean.

### What colour text works on a gradient?

White or near-white on dark and bold gradients, and a dark ink on pastel and calm ones. Check contrast at the lightest point behind the text.

### Can I use these gradient codes in Figma or Canva?

Yes. Copy the hex colours and their stop positions into the tool's gradient fill and match the angle.