# Monochrome light blue to blue linear gradient

Monochrome light blue to blue linear gradient with 7 colors: #d3efff, #8acdff, #3295fd, #0c56dc, #073393, #0c62dc, #50a5fc. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `ka7hulaKRBFTAwVATkDrrvAENJP5aNz7g`
- Page: https://grabient.com/ka7hulaKRBFTAwVATkDrrvAENJP5aNz7g
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.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 | `#d3efff` | `oklch(93.70% 0.0368 232.01)` | Ice Castle | black, 17.5 to 1 |
| 2 | `#8acdff` | `oklch(82.28% 0.0977 241.54)` | Platonic Blue | black, 12.2 to 1 |
| 3 | `#3295fd` | `oklch(66.54% 0.1778 253.17)` | Brilliant Azure | black, 6.8 to 1 |
| 4 | `#0c56dc` | `oklch(50.39% 0.2150 261.62)` | Frosted Blueberries | white, 6.2 to 1 |
| 5 | `#073393` | `oklch(36.61% 0.1640 262.68)` | Smalt | white, 11 to 1 |
| 6 | `#0c62dc` | `oklch(52.76% 0.2012 259.51)` | Blue Ruin | white, 5.5 to 1 |
| 7 | `#50a5fc` | `oklch(70.87% 0.1516 251.05)` | Âbi Blue | black, 8.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d3efff 0.0%, #8acdff 16.7%, #3295fd 33.3%, #0c56dc 50.0%, #073393 66.7%, #0c62dc 83.3%, #50a5fc 100.0%);
background: linear-gradient(90deg in oklch, oklch(93.70% 0.0368 232.01) 0.0%, oklch(82.28% 0.0977 241.54) 16.7%, oklch(66.54% 0.1778 253.17) 33.3%, oklch(50.39% 0.2150 261.62) 50.0%, oklch(36.61% 0.1640 262.68) 66.7%, oklch(52.76% 0.2012 259.51) 83.3%, oklch(70.87% 0.1516 251.05) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.037 | 232 |
| 2 | 0.823 | 0.099 | 241.5 |
| 3 | 0.665 | 0.178 | 253.2 |
| 4 | 0.504 | 0.215 | 261.6 |
| 5 | 0.366 | 0.164 | 262.7 |
| 6 | 0.528 | 0.201 | 259.5 |
| 7 | 0.709 | 0.152 | 251.1 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)
- [App background gradients](https://grabient.com/app-background-gradients)
- [Electric blue gradients](https://grabient.com/electric-blue-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)

## Other forms

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