# Blue, light blue, teal and black linear gradient

Blue, light blue, teal and black linear gradient with 7 colors: #54b9e8, #67d8fa, #b3f8ff, #97fffe, #67b5ba, #24505b, #00121a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSvVSldyO7hWMQ8`
- Page: https://grabient.com/kSvVSldyO7hWMQ8
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, pastel, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.4 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 | `#54b9e8` | `oklch(74.41% 0.1157 232.03)` | Sea Frolic | black, 9.4 to 1 |
| 2 | `#67d8fa` | `oklch(82.97% 0.1128 219.86)` | Heisenberg Blue | black, 12.8 to 1 |
| 3 | `#b3f8ff` | `oklch(93.67% 0.0689 203.56)` | Ice Citadel | black, 17.8 to 1 |
| 4 | `#97fffe` | `oklch(93.70% 0.0970 195.05)` | Glitchy Shader Blue | black, 18 to 1 |
| 5 | `#67b5ba` | `oklch(72.38% 0.0773 202.01)` | Adonis | black, 8.8 to 1 |
| 6 | `#24505b` | `oklch(40.39% 0.0516 216.73)` | Sunken Mystery | white, 8.8 to 1 |
| 7 | `#00121a` | `oklch(16.93% 0.0330 227.90)` | Kuretake Black Manga | white, 19 to 1 |

## CSS

```css
background: linear-gradient(90deg, #54b9e8 0.0%, #67d8fa 16.7%, #b3f8ff 33.3%, #97fffe 50.0%, #67b5ba 66.7%, #24505b 83.3%, #00121a 100.0%);
background: linear-gradient(90deg in oklch, oklch(74.41% 0.1157 232.03) 0.0%, oklch(82.97% 0.1128 219.86) 16.7%, oklch(93.67% 0.0689 203.56) 33.3%, oklch(93.70% 0.0970 195.05) 50.0%, oklch(72.38% 0.0773 202.01) 66.7%, oklch(40.39% 0.0516 216.73) 83.3%, oklch(16.93% 0.0330 227.90) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.744 | 0.116 | 232 |
| 2 | 0.937 | 0.098 | 195 |
| 3 | 0.169 | 0.033 | 227.8 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)

## Other forms

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