# Cyan gradient: crisp electric codes

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

Cyan is the colour of screens, swimming pools and ice: clean, bright and a little futuristic. It is also much lighter than it looks, which changes how you put words on it.

## The short version

- A cyan gradient blends the bright colour halfway between green and blue with white, blue, lime, magenta or a deep navy.
- Pure screen cyan is `#00ffff`, which CSS also calls aqua, and it is lighter and brighter than teal or turquoise.
- White text on pure cyan has a contrast of only about 1.3 to 1, so cyan needs dark type or a much deeper background behind words.
- Cyan looks most electric on a near black or navy ground, where a small amount of it appears to glow.
- Cyan blends cleanly into blue and lime, because both are its neighbours on the colour wheel.

A **cyan gradient** blends the bright colour halfway between green and blue with one of its neighbours: white for ice, blue for an electric tech look, lime for freshness, magenta for a cyber feel, or a deep navy where cyan seems to glow. Pure screen cyan is `#00ffff`, and it is far lighter than most people expect, so the main skill is deciding where the words go. Copyable codes for each look follow, with the contrast numbers that matter.

## Cyan, teal and turquoise are not the same

These three get swapped constantly, and the difference matters when you brief a designer or pick a code. CSS even names all three, and they are clearly distinct. Cyan is the brightest and the most balanced between green and blue. Turquoise is softer and a little greener, like the gemstone. Teal is much darker and calmer.

| Colour | CSS name and hex | Character |
| --- | --- | --- |
| Cyan | `aqua` / `cyan`, `#00ffff` | Brightest, electric, synthetic |
| Electric cyan | `#00e5ff` | Cyan with a touch more blue, easier on the eyes |
| Turquoise | `turquoise`, `#40e0d0` | Softer and greener, tropical |
| Teal | `teal`, `#008080` | Dark, calm, grown up |

Four neighbours. If your gradient needs to feel calm rather than bright, you probably want teal, not cyan.

For the calmer relatives, see [teal gradient](https://gradiently.design/guide/teal-gradient) and [turquoise gradient](https://gradiently.design/guide/turquoise-gradient). This article stays at the bright end.

- Ice: #f0fdff
- Pool light: #a5f3fc
- Pure cyan: #00ffff
- Electric cyan: #00e5ff
- Deep cyan: #0891b2
- Lagoon: #0e7490
- Night navy: #082f49
- Lime accent: #b6f73a

A cyan family from ice to navy, plus lime as the partner that keeps it fresh.

## Ice and pool cyan gradient codes

The light end of cyan feels like cold water and clean air. Ice is almost white with a hint of colour; glacier and pool run deeper, through bright cyan into a blue green that can carry white type at the bottom. They suit summer offers, skincare with a cooling story, drinks and anything that wants to feel refreshing.

- Ice: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Glacier: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Swimming pool: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Light cyans. Put dark type on the upper part of each; only the deepest stop at the bottom of glacier and pool takes white.

## Electric cyan on dark backgrounds

Cyan becomes electric when it sits on darkness. A small cyan light on a near black or navy ground looks like a screen, a laser or a data visualisation, which is why it is everywhere in software, gaming and science. Keep most of the frame dark and let cyan occupy a corner or an edge. The **cyan blue gradient** in this set is the most versatile of all, bright at one end and solidly blue at the other.

- Cyan to electric blue: `linear-gradient(135deg, #00e5ff 0%, #00a3ff 50%, #2563eb 100%)`
- Cyan light on black: `radial-gradient(circle at 30% 30%, #00e5ff 0%, #0077a8 30%, #04202e 65%, #01070c 100%)`
- Circuit night: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Dark grounds with cyan light. Circuit night rises from black to cyan, perfect for a hero where the headline sits in the dark upper half.

For full schemes built around this look, [tech colour palettes](https://gradiently.design/guide/tech-color-palettes) has several, and [neon gradients](https://gradiently.design/guide/neon-gradients) pushes it further towards nightlife.

## Cyan with lime and with magenta

Cyan into lime passes through mint and feels sporty, fresh and optimistic. Cyan with magenta is the cyberpunk pairing: two of the three printing primaries, both at full volume. Run that one through a dark indigo middle and it feels like a neon street at night rather than a children's toy. The [magenta gradient](https://gradiently.design/guide/magenta-gradient) article covers the other side of this pairing.

- Cyan to lime: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

Two bold pairings. Both are loud, so give them short words and a lot of space.

## The contrast trap: words on cyan

Cyan is one of the lightest saturated colours a screen can show. White type on pure `#00ffff` has a contrast of only about 1.3 to 1, which is unreadable, while black on the same cyan reaches about 16.7 to 1. White starts to work once the cyan deepens to around `#0e7490`, where it reaches roughly 5.4 to 1. [Colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility) explains the ratios and the targets.

### Hard to read

- White type on bright cyan
- Cyan type on a white page
- Small text across the bright middle of a gradient
- Pale blue type on ice

### Easy to read

- Navy or near black type on bright cyan
- Cyan type on a navy or black page
- Small text on the deepest stop only
- White type on lagoon #0e7490 or darker

This is the kind of judgement Gradiently makes for you. Auto ink picks light or dark type for each line from the Mark's own palette, and the Mark moves its calmest, best contrasting region behind the words, so a bright cyan background never leaves white text stranded.

## A cyan gradient border in CSS

On dark interfaces, cyan works beautifully as an edge rather than a fill. A gradient border keeps the card readable while adding the electric feel. This uses two backgrounds, one clipped to the padding and one to the border, so it keeps rounded corners.

```css
.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}
```

A dark card with a cyan to blue border. Swap the second gradient for cyan to lime for a fresher feel.

More techniques, including animated borders, are in [CSS gradient border](https://gradiently.design/guide/css-gradient-border).

## Where a cyan gradient fits

Cyan is a natural choice for software launches, developer tools, gaming, swimwear, drinks and anything that wants to feel fast or cold. On launch day, keep one cyan look across the announcement post, the link preview and the changelog banner so people recognise it in every feed. [SaaS startup branding](https://gradiently.design/guide/saas-startup-branding) shows how to build a whole identity around one bright colour like this.

A wide social post with a dark navy background, a bright cyan light at one edge and the words Deploys in seconds in white

A launch post for X at 1600×900. White type on the dark side, with the cyan light kept away from the words.

## FAQ

### What is the hex code for cyan?

Pure screen cyan is #00ffff, also called aqua in CSS. A slightly bluer, more comfortable electric cyan is #00e5ff.

### What is the difference between cyan and teal?

Cyan is bright and light, halfway between green and blue. Teal, #008080 in CSS, is a much darker and calmer blue green.

### What text colour works on a cyan background?

Navy or near black on bright cyan. White only works on deep cyans such as #0e7490 or darker.

### What colours go well with a cyan gradient?

Blue and lime blend cleanly because they are cyan's neighbours. Magenta makes a bold cyberpunk pairing, and navy or black makes cyan glow.