# Electric cyan indigo gradient

Vivid light blue, cyan and blue linear gradient with 8 colors: #34c6ff, #3bfffd, #40fbff, #53fffb, #32c2ff, #2b68ff, #272bff, #2c19ff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Vivid light blue, cyan and blue linear gradient
- Seed: `kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA`
- Page: https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA?steps=8&angle=225
- Drawn as: linear gradient, 8 steps, 225 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 6.3 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#34c6ff` | `oklch(77.56% 0.1419 229.92)` | Shovel Knight | black, 10.6 to 1 |
| 2 | `#3bfffd` | `oklch(90.94% 0.1460 194.00)` | Beaming Blue | black, 16.9 to 1 |
| 3 | `#40fbff` | `oklch(90.16% 0.1419 197.16)` | Bright Cyan | black, 16.4 to 1 |
| 4 | `#53fffb` | `oklch(91.34% 0.1376 192.94)` | Electric Sheep | black, 17 to 1 |
| 5 | `#32c2ff` | `oklch(76.77% 0.1443 232.03)` | Shovel Knight | black, 10.3 to 1 |
| 6 | `#2b68ff` | `oklch(57.48% 0.2326 263.74)` | Gentian Flower | white, 4.6 to 1 |
| 7 | `#272bff` | `oklch(48.42% 0.2913 267.97)` | Vivid Blue | white, 7.3 to 1 |
| 8 | `#2c19ff` | `oklch(47.24% 0.2990 269.02)` | Blue Pencil | white, 7.8 to 1 |

## CSS

```css
background: linear-gradient(225deg, #34c6ff 0.0%, #3bfffd 14.3%, #40fbff 28.6%, #53fffb 42.9%, #32c2ff 57.1%, #2b68ff 71.4%, #272bff 85.7%, #2c19ff 100.0%);
background: linear-gradient(225deg in oklch, oklch(77.56% 0.1419 229.92) 0.0%, oklch(90.94% 0.1460 194.00) 14.3%, oklch(90.16% 0.1419 197.16) 28.6%, oklch(91.34% 0.1376 192.94) 42.9%, oklch(76.77% 0.1443 232.03) 57.1%, oklch(57.48% 0.2326 263.74) 71.4%, oklch(48.42% 0.2913 267.97) 85.7%, oklch(47.24% 0.2990 269.02) 100.0%);
```

## Keyframes

8 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.776 | 0.142 | 229.9 |
| 2 | 0.909 | 0.149 | 194 |
| 3 | 0.902 | 0.15 | 197.2 |
| 4 | 0.913 | 0.15 | 192.9 |
| 5 | 0.768 | 0.145 | 232 |
| 6 | 0.575 | 0.233 | 263.7 |
| 7 | 0.484 | 0.294 | 268 |
| 8 | 0.472 | 0.299 | 269 |

## In these collections

- [Cyan gradients](https://grabient.com/cyan-gradients)

## Other forms

- [JSON](https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA.json?steps=8&angle=225)
- [PNG](https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA.png?steps=8&angle=225)
- [SVG](https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA.svg?steps=8&angle=225)
- [CSS](https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA.css?steps=8&angle=225)
- [ASE](https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA.ase?steps=8&angle=225)
- [GPL](https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA.gpl?steps=8&angle=225)
- [GRD](https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA.grd?steps=8&angle=225)
- [Design tokens](https://grabient.com/kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA.tokens.json?steps=8&angle=225)
- [Social card](https://grabient.com/api/og?seed=kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA&steps=8&angle=225)
- [Palettes like this one](https://grabient.com/palettes?q=kcxWej87Y7vK2wF0Nr94bTEklUw696sBvGzAA)
- [Guide for agents](https://grabient.com/llms.txt)