# Blue purple gradient: 20 codes that blend cleanly

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

Blue and purple are neighbours, so they blend more easily than almost any other pair. That is also why so many blue purple gradients look the same. Here are twenty that don't.

## The short version

- A blue purple gradient blends neighbouring hues such as blue #3b82f6, indigo #4f46e5 and violet #7c3aed, so the transition stays clean without a bridge colour.
- The most common problem with blue to purple blends is not mud but sameness, because the default indigo to violet diagonal is used everywhere.
- Blends between cyan and pink, or between dull blues and dull purples, can go grey in the middle, and interpolating in OKLCH keeps them bright.
- White text reads well on indigo and violet but often fails on mid blues and lavenders, where a deep indigo ink works better.
- A dark ground, a third colour used sparingly and a little grain make a blue purple gradient look considered rather than default.

A **blue purple gradient** runs between neighbouring hues on the colour wheel: blue `#3b82f6`, indigo `#4f46e5`, violet `#7c3aed` and the soft periwinkles and lavenders around them. Because the hues sit side by side, the blend stays clean almost automatically. The harder part is making one that doesn't look like the thousands of app icons and conference slides that already use one. Below are twenty codes in four moods, the cases where the blend does go dull, and the text colours that read on each.

## Why blue and purple blend so well

Purple is blue with some red in it. Walk from one to the other and every step in between is a real, saturated colour: blue, indigo, violet. Compare that with blending blue into orange, where the halfway point is a flat grey. [Analogous colours](https://gradiently.design/guide/analogous-colors) explains the principle, and the [colour wheel](https://gradiently.design/guide/color-wheel) shows where each hue sits.

- Midnight: #0f0a2e
- Deep indigo: #1e1b4b
- Royal blue: #1d4ed8
- Blue: #3b82f6
- Indigo: #4f46e5
- Violet: #7c3aed
- Lavender: #a78bfa
- Periwinkle mist: #c7d2fe

The blue to purple family. Pick three or four adjacent swatches and the gradient will stay vivid all the way through.

## Dark blue purple gradients: night and depth

Start dark and the gradient instantly looks less generic. A midnight ground with indigo and violet light feels like a night sky, a concert hall or a premium app. These five carry light text beautifully.

- Midnight indigo: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Violet moonrise: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Navy to plum: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Horizon glow: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Deep current: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Dark blue purple gradients. Banding shows most in blends like these, so add grain before you export.

## Soft blue purple gradients: periwinkle and lavender

Lighten the family and it turns calm, dreamy and a little nostalgic. These suit wellness, sleep, stationery and anything aimed at a gentle mood. Keep the ink dark; white disappears on most of them. There are more in [pastel gradients](https://gradiently.design/guide/pastel-gradients).

- Periwinkle haze: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Morning lavender: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Lilac cloud: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Cornflower field: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Paper to violet: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Soft periwinkle and lavender blends. Deep indigo text reads on every one of them.

## Electric blue purple gradients

Push saturation up and the pair becomes loud, synthetic and very digital. These suit gaming, music, tech launches and anything nocturnal. Use them in bands or glows rather than across a whole poster, and pair with near black so they have something to glow against. [Neon gradients](https://gradiently.design/guide/neon-gradients) has the full technique.

- Electric violet: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Sky to orchid: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Indigo pulse: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Ultraviolet spin: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Black to ultraviolet: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Saturated blue purple gradients. The first is the classic; the rest are less expected versions of it.

## Blue purple gradients with a third colour

The fastest way to make a blue purple gradient your own is one extra colour used sparingly. Pink takes it towards dusk, teal towards aurora, gold towards luxury and peach towards a soft sunrise.

- Dusk with pink: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Aurora teal: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indigo with gold: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Lavender sunrise: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Blue, violet, crimson: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Twenty codes in total. Pink, teal and crimson sit next to blue or purple on the wheel; gold stays a small light and peach stays pale, so no blend passes through grey.

## When a blue purple gradient goes muddy

Blue to violet is safe. Two related blends are not. Cyan into pink crosses a lot of the wheel, and dull, greyish blues into dull purples give a lifeless middle. In both cases the fix is the same: interpolate in OKLCH, which keeps brightness and saturation even across the blend. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) and [gradient interpolation](https://gradiently.design/guide/gradient-interpolation) go deeper.

```css
/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}
```

Adding `in oklch` changes how the browser mixes the stops. Older browsers ignore the whole declaration, so keep a background colour as a fallback.

## How to make a blue purple gradient look less generic

The violet to blue diagonal is so familiar that people read it as a default before they read anything you wrote on it. You don't need exotic colours to avoid that. Small, deliberate decisions are enough, and they compound.

- **Choose a ground first.** A midnight or paper ground sets the mood more than the blue or purple does, and immediately separates you from the bright default.
- **Move the light off the diagonal.** Put the brightest violet in one corner with a radial gradient instead of running it edge to edge at 135 degrees.
- **Use uneven stops.** Let indigo hold 60 per cent of the surface and violet only the last stretch. Equal thirds look machine made.
- **Add one accent in one place.** A sliver of pink, teal or gold, as in the set above, is remembered far more than the base colours.
- **Finish with grain.** A fine noise layer hides banding and turns a screen blend into a surface; [grainy gradients](https://gradiently.design/guide/grainy-gradients) has the code.
- **Render each size separately.** The light should land somewhere sensible on a story and on a banner, not wherever a crop leaves it.

Mood names help as well. "Midnight indigo with a gold edge" is a decision you can repeat across a whole year of posts; "blue purple gradient" is not.

## Text on a blue purple gradient

| Background | Text | Contrast | Verdict |
| --- | --- | --- | --- |
| Indigo `#4f46e5` | White | 6.3:1 | Good |
| Violet `#7c3aed` | White | 5.7:1 | Good |
| Blue `#3b82f6` | White | 3.7:1 | Large headlines only |
| Lavender `#a78bfa` | White | 2.7:1 | Fails |
| Lavender `#a78bfa` | Deep indigo `#1e1b4b` | 5.9:1 | Good |
| Periwinkle mist `#c7d2fe` | Deep indigo `#1e1b4b` | 10.7:1 | Excellent |

WCAG contrast ratios. Mid blue is lighter than it looks, which catches many blue to purple designs out at the blue end.

A square LinkedIn post announcing version 3 with white lettering on a dark indigo and violet gradient

A LinkedIn post on a dark indigo ground. Light text, violet glow kept to one side.

A vertical story with dark indigo lettering on a pale periwinkle and lavender gradient

A story on soft periwinkle with deep indigo ink.

When words cross from the dark end to the light end of the same gradient, no single ink works everywhere. [Text on a gradient](https://gradiently.design/guide/text-on-gradient) covers the options. In Gradiently, Auto ink handles this per line, choosing light or dark type from the Mark's own palette, so a blue purple background never swallows a headline.

## FAQ

### What is a good blue purple gradient code?

A dependable one is `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. For something less expected, start from a dark ground: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Do blue and purple go together in a gradient?

Yes. They are neighbours on the colour wheel, so every step between them is a clean, saturated colour such as indigo.

### Why does my blue to pink gradient look grey in the middle?

The browser mixes in sRGB by default, which can dull blends that cross a lot of the wheel. Add `in oklch` after the angle to keep the middle bright.

### What colour text goes on a blue purple gradient?

White reads well on indigo and violet. On mid blue, lavender and periwinkle, a deep indigo such as `#1e1b4b` is safer.

### What colour is between blue and purple?

Indigo. A typical indigo for design is `#4f46e5`, and darker indigos sit around `#312e81`.