# Gray linear gradient

Gray linear gradient with 32 colors: #f8f4ff, #f7f2fd, #f7f0fa, #f6eef7, #f5ecf4, #f4e9f1, #f2e7ed, #f0e4e9, #eee2e4, #ecdfe0, #e9dddc, #e6dad8, #e2d8d4, #dfd5d0, #dbd3cd, #d8d0c9, #d4cec6, #d0cbc3, #ccc8c0, #c8c5bd, #c4c2ba, #bfbfb7, #bbbbb3, #b6b8b0, #b2b5ad, #aeb2aa, #aaaea8, #a7aca5, #a4a9a3, #a1a7a1, #9fa49f, #9da39e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kS9wvX7QTO1oDya`
- Page: https://grabient.com/kS9wvX7QTO1oDya?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: neutral, light
- Hues: achromatic
- Contrast of its darkest and lightest colors: 2.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 | `#f8f4ff` | `oklch(97.24% 0.0152 303.05)` | Sugar Crystal | black, 19.3 to 1 |
| 2 | `#f7f2fd` | `oklch(96.84% 0.0151 307.69)` | Cloud Break | black, 19 to 1 |
| 3 | `#f7f0fa` | `oklch(96.36% 0.0149 313.43)` | Cloud Break | black, 18.8 to 1 |
| 4 | `#f6eef7` | `oklch(95.81% 0.0148 320.13)` | Sentimental Pink | black, 18.5 to 1 |
| 5 | `#f5ecf4` | `oklch(95.20% 0.0146 327.64)` | Snow Plum | black, 18.1 to 1 |
| 6 | `#f4e9f1` | `oklch(94.53% 0.0145 335.83)` | Snow Plum | black, 17.8 to 1 |
| 7 | `#f2e7ed` | `oklch(93.82% 0.0143 344.57)` | Rose Fantasy | black, 17.4 to 1 |
| 8 | `#f0e4e9` | `oklch(93.06% 0.0141 353.72)` | Rosie Posie | black, 17 to 1 |
| 9 | `#eee2e4` | `oklch(92.27% 0.0139 3.15)` | Dulcet Pink | black, 16.6 to 1 |
| 10 | `#ecdfe0` | `oklch(91.45% 0.0137 12.71)` | Crystallise | black, 16.2 to 1 |
| 11 | `#e9dddc` | `oklch(90.60% 0.0135 22.27)` | Red Dust | black, 15.8 to 1 |
| 12 | `#e6dad8` | `oklch(89.74% 0.0133 31.70)` | Moxie | black, 15.3 to 1 |
| 13 | `#e2d8d4` | `oklch(88.87% 0.0131 40.85)` | Light Thought | black, 14.9 to 1 |
| 14 | `#dfd5d0` | `oklch(87.99% 0.0129 49.60)` | Kyoto Pearl | black, 14.5 to 1 |
| 15 | `#dbd3cd` | `oklch(87.12% 0.0127 57.81)` | Baked Biscotti | black, 14.1 to 1 |
| 16 | `#d8d0c9` | `oklch(86.25% 0.0125 65.33)` | Bowstring | black, 13.8 to 1 |
| 17 | `#d4cec6` | `oklch(85.39% 0.0123 72.16)` | Ravine | black, 13.4 to 1 |
| 18 | `#d0cbc3` | `oklch(84.46% 0.0121 78.84)` | Ground Fog | black, 13 to 1 |
| 19 | `#ccc8c0` | `oklch(83.45% 0.0119 85.45)` | Vessel | black, 12.6 to 1 |
| 20 | `#c8c5bd` | `oklch(82.39% 0.0117 91.97)` | Notre Dame | black, 12.1 to 1 |
| 21 | `#c4c2ba` | `oklch(81.29% 0.0115 98.36)` | San Francisco Fog | black, 11.7 to 1 |
| 22 | `#bfbfb7` | `oklch(80.17% 0.0113 104.60)` | Light Year | black, 11.3 to 1 |
| 23 | `#bbbbb3` | `oklch(79.04% 0.0111 110.64)` | Weathered Moss | black, 10.8 to 1 |
| 24 | `#b6b8b0` | `oklch(77.91% 0.0109 116.46)` | Fossilised | black, 10.4 to 1 |
| 25 | `#b2b5ad` | `oklch(76.80% 0.0107 122.02)` | Magnetic | black, 10 to 1 |
| 26 | `#aeb2aa` | `oklch(75.73% 0.0105 127.30)` | Urban Putty | black, 9.7 to 1 |
| 27 | `#aaaea8` | `oklch(74.71% 0.0103 132.27)` | Gull Wing | black, 9.3 to 1 |
| 28 | `#a7aca5` | `oklch(73.75% 0.0102 136.88)` | Ginkgo Green | black, 9 to 1 |
| 29 | `#a4a9a3` | `oklch(72.87% 0.0100 141.12)` | Silver Clouds | black, 8.7 to 1 |
| 30 | `#a1a7a1` | `oklch(72.09% 0.0099 144.94)` | Unusual Grey | black, 8.5 to 1 |
| 31 | `#9fa49f` | `oklch(71.42% 0.0097 148.32)` | Sage Grey | black, 8.3 to 1 |
| 32 | `#9da39e` | `oklch(70.87% 0.0096 151.23)` | Sage Grey | black, 8.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f8f4ff 0.0%, #f7f2fd 3.2%, #f7f0fa 6.5%, #f6eef7 9.7%, #f5ecf4 12.9%, #f4e9f1 16.1%, #f2e7ed 19.4%, #f0e4e9 22.6%, #eee2e4 25.8%, #ecdfe0 29.0%, #e9dddc 32.3%, #e6dad8 35.5%, #e2d8d4 38.7%, #dfd5d0 41.9%, #dbd3cd 45.2%, #d8d0c9 48.4%, #d4cec6 51.6%, #d0cbc3 54.8%, #ccc8c0 58.1%, #c8c5bd 61.3%, #c4c2ba 64.5%, #bfbfb7 67.7%, #bbbbb3 71.0%, #b6b8b0 74.2%, #b2b5ad 77.4%, #aeb2aa 80.6%, #aaaea8 83.9%, #a7aca5 87.1%, #a4a9a3 90.3%, #a1a7a1 93.5%, #9fa49f 96.8%, #9da39e 100.0%);
background: linear-gradient(90deg in oklch, oklch(97.24% 0.0152 303.05) 0.0%, oklch(96.84% 0.0151 307.69) 3.2%, oklch(96.36% 0.0149 313.43) 6.5%, oklch(95.81% 0.0148 320.13) 9.7%, oklch(95.20% 0.0146 327.64) 12.9%, oklch(94.53% 0.0145 335.83) 16.1%, oklch(93.82% 0.0143 344.57) 19.4%, oklch(93.06% 0.0141 353.72) 22.6%, oklch(92.27% 0.0139 3.15) 25.8%, oklch(91.45% 0.0137 12.71) 29.0%, oklch(90.60% 0.0135 22.27) 32.3%, oklch(89.74% 0.0133 31.70) 35.5%, oklch(88.87% 0.0131 40.85) 38.7%, oklch(87.99% 0.0129 49.60) 41.9%, oklch(87.12% 0.0127 57.81) 45.2%, oklch(86.25% 0.0125 65.33) 48.4%, oklch(85.39% 0.0123 72.16) 51.6%, oklch(84.46% 0.0121 78.84) 54.8%, oklch(83.45% 0.0119 85.45) 58.1%, oklch(82.39% 0.0117 91.97) 61.3%, oklch(81.29% 0.0115 98.36) 64.5%, oklch(80.17% 0.0113 104.60) 67.7%, oklch(79.04% 0.0111 110.64) 71.0%, oklch(77.91% 0.0109 116.46) 74.2%, oklch(76.80% 0.0107 122.02) 77.4%, oklch(75.73% 0.0105 127.30) 80.6%, oklch(74.71% 0.0103 132.27) 83.9%, oklch(73.75% 0.0102 136.88) 87.1%, oklch(72.87% 0.0100 141.12) 90.3%, oklch(72.09% 0.0099 144.94) 93.5%, oklch(71.42% 0.0097 148.32) 96.8%, oklch(70.87% 0.0096 151.23) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.972 | 0.015 | 303 |
| 2 | 0.858 | 0.012 | 428.8 |
| 3 | 0.709 | 0.01 | 511.2 |

## In these collections

- [White gradients](https://grabient.com/white-gradients)
- [Gray gradients](https://grabient.com/gray-gradients)

## Other forms

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