# Neon green, blue, purple and pink linear gradient

Neon green, blue, purple and pink linear gradient with 8 colors: #00bc1e, #1eb984, #1a95cf, #355bfc, #7f25ff, #c611ff, #f507de, #fe159d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcr6hmWLRCVCvyJGWEORWZC89uwpVbEI0-BCQ`
- Page: https://grabient.com/kcr6hmWLRCVCvyJGWEORWZC89uwpVbEI0-BCQ?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Kinds: vivid, neon, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.2 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 | `#00bc1e` | `oklch(68.90% 0.2274 143.43)` | Pedestrian Green | black, 8.1 to 1 |
| 2 | `#1eb984` | `oklch(69.69% 0.1433 163.52)` | Slime Girl | black, 8.2 to 1 |
| 3 | `#1a95cf` | `oklch(63.39% 0.1309 236.43)` | Astrolabe Reef | black, 6.2 to 1 |
| 4 | `#355bfc` | `oklch(55.12% 0.2425 267.08)` | YInMn Blue | white, 5.1 to 1 |
| 5 | `#7f25ff` | `oklch(54.33% 0.2800 292.44)` | Szöllősi Grape | white, 5.8 to 1 |
| 6 | `#c611ff` | `oklch(62.20% 0.3013 314.63)` | Sparkling Purple | black, 4.9 to 1 |
| 7 | `#f507de` | `oklch(66.93% 0.2976 333.65)` | Vice City | black, 5.9 to 1 |
| 8 | `#fe159d` | `oklch(65.75% 0.2646 353.73)` | Forgiven Sin | black, 5.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #00bc1e 0.0%, #1eb984 14.3%, #1a95cf 28.6%, #355bfc 42.9%, #7f25ff 57.1%, #c611ff 71.4%, #f507de 85.7%, #fe159d 100.0%);
background: linear-gradient(90deg in oklch, oklch(68.90% 0.2274 143.43) 0.0%, oklch(69.69% 0.1433 163.52) 14.3%, oklch(63.39% 0.1309 236.43) 28.6%, oklch(55.12% 0.2425 267.08) 42.9%, oklch(54.33% 0.2800 292.44) 57.1%, oklch(62.20% 0.3013 314.63) 71.4%, oklch(66.93% 0.2976 333.65) 85.7%, oklch(65.75% 0.2646 353.73) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.689 | 0.231 | 143.4 |
| 2 | 0.697 | 0.143 | 163.5 |
| 3 | 0.634 | 0.131 | 236.4 |
| 4 | 0.551 | 0.243 | 267.1 |
| 5 | 0.543 | 0.281 | 292.4 |
| 6 | 0.622 | 0.305 | 314.6 |
| 7 | 0.669 | 0.298 | 333.7 |
| 8 | 0.657 | 0.265 | 353.7 |

## In these collections

- [Vivid multicolor gradients](https://grabient.com/vivid-multicolor-gradients)
- [Neon gradients](https://grabient.com/neon-gradients)

## Other forms

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