# Black to gray linear gradient

Black to gray linear gradient with 32 colors: #212429, #23272b, #272a2f, #2a2e32, #2e3236, #33373b, #383c40, #3d4145, #43474b, #494d51, #505358, #565a5e, #5d6165, #65686c, #6c7074, #73777b, #7b7f83, #83868a, #8a8e92, #92969a, #9a9da1, #a1a5a8, #a9acb0, #b0b3b7, #b7babe, #bdc1c4, #c4c7ca, #c9cdd0, #cfd2d5, #d4d7da, #d8dbde, #dcdfe2. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kQQgeycoI_4`
- Page: https://grabient.com/kQQgeycoI_4?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark to light, neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 11.5 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 | `#212429` | `oklch(25.98% 0.0096 250.31)` | Dark Gunmetal | white, 15.5 to 1 |
| 2 | `#23272b` | `oklch(27.12% 0.0096 250.31)` | Black Beauty | white, 15 to 1 |
| 3 | `#272a2f` | `oklch(28.44% 0.0095 250.31)` | Blue Charcoal | white, 14.3 to 1 |
| 4 | `#2a2e32` | `oklch(29.93% 0.0094 250.31)` | Stretch Limo | white, 13.6 to 1 |
| 5 | `#2e3236` | `oklch(31.59% 0.0093 250.31)` | Ebony | white, 12.8 to 1 |
| 6 | `#33373b` | `oklch(33.39% 0.0092 250.31)` | Tribecca Corner | white, 12 to 1 |
| 7 | `#383c40` | `oklch(35.34% 0.0090 250.31)` | Detective Thriller | white, 11.1 to 1 |
| 8 | `#3d4145` | `oklch(37.40% 0.0089 250.31)` | Chimney Smoke | white, 10.2 to 1 |
| 9 | `#43474b` | `oklch(39.57% 0.0088 250.31)` | Steel Grey | white, 9.3 to 1 |
| 10 | `#494d51` | `oklch(41.84% 0.0086 250.31)` | Blackwood | white, 8.5 to 1 |
| 11 | `#505358` | `oklch(44.20% 0.0085 250.31)` | Water Ouzel | white, 7.6 to 1 |
| 12 | `#565a5e` | `oklch(46.62% 0.0083 250.31)` | Summer Concrete | white, 6.9 to 1 |
| 13 | `#5d6165` | `oklch(49.11% 0.0082 250.31)` | Sheet Metal | white, 6.2 to 1 |
| 14 | `#65686c` | `oklch(51.64% 0.0080 250.31)` | Equinox | white, 5.5 to 1 |
| 15 | `#6c7074` | `oklch(54.20% 0.0078 250.31)` | High-Speed Steel | white, 5 to 1 |
| 16 | `#73777b` | `oklch(56.78% 0.0077 250.31)` | Astrogranite | black, 4.6 to 1 |
| 17 | `#7b7f83` | `oklch(59.36% 0.0075 250.31)` | Cowboy Spur | black, 5.1 to 1 |
| 18 | `#83868a` | `oklch(61.95% 0.0073 250.31)` | Heavy Grey | black, 5.7 to 1 |
| 19 | `#8a8e92` | `oklch(64.51% 0.0072 250.31)` | Bali Deep | black, 6.3 to 1 |
| 20 | `#92969a` | `oklch(67.04% 0.0070 250.31)` | Steely Grey | black, 7 to 1 |
| 21 | `#9a9da1` | `oklch(69.52% 0.0068 250.31)` | Smokey Stone | black, 7.7 to 1 |
| 22 | `#a1a5a8` | `oklch(71.94% 0.0067 250.31)` | Baby Seal | black, 8.4 to 1 |
| 23 | `#a9acb0` | `oklch(74.30% 0.0065 250.31)` | Northern Light Grey | black, 9.2 to 1 |
| 24 | `#b0b3b7` | `oklch(76.57% 0.0064 250.31)` | Astroscopus Grey | black, 9.9 to 1 |
| 25 | `#b7babe` | `oklch(78.74% 0.0062 250.31)` | Quiet Grey | black, 10.7 to 1 |
| 26 | `#bdc1c4` | `oklch(80.81% 0.0061 250.31)` | Lazy Grey | black, 11.5 to 1 |
| 27 | `#c4c7ca` | `oklch(82.75% 0.0060 250.31)` | Shining Silver | black, 12.3 to 1 |
| 28 | `#c9cdd0` | `oklch(84.55% 0.0059 250.31)` | Lunar Rays | black, 13 to 1 |
| 29 | `#cfd2d5` | `oklch(86.21% 0.0058 250.31)` | Fragile Blue | black, 13.8 to 1 |
| 30 | `#d4d7da` | `oklch(87.70% 0.0057 250.31)` | December Sky | black, 14.5 to 1 |
| 31 | `#d8dbde` | `oklch(89.02% 0.0056 250.31)` | Empire State Grey | black, 15.1 to 1 |
| 32 | `#dcdfe2` | `oklch(90.16% 0.0055 250.31)` | Wayward Wind | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(45deg, #212429 0.0%, #23272b 3.2%, #272a2f 6.5%, #2a2e32 9.7%, #2e3236 12.9%, #33373b 16.1%, #383c40 19.4%, #3d4145 22.6%, #43474b 25.8%, #494d51 29.0%, #505358 32.3%, #565a5e 35.5%, #5d6165 38.7%, #65686c 41.9%, #6c7074 45.2%, #73777b 48.4%, #7b7f83 51.6%, #83868a 54.8%, #8a8e92 58.1%, #92969a 61.3%, #9a9da1 64.5%, #a1a5a8 67.7%, #a9acb0 71.0%, #b0b3b7 74.2%, #b7babe 77.4%, #bdc1c4 80.6%, #c4c7ca 83.9%, #c9cdd0 87.1%, #cfd2d5 90.3%, #d4d7da 93.5%, #d8dbde 96.8%, #dcdfe2 100.0%);
background: linear-gradient(45deg in oklch, oklch(25.98% 0.0096 250.31) 0.0%, oklch(27.12% 0.0096 250.31) 3.2%, oklch(28.44% 0.0095 250.31) 6.5%, oklch(29.93% 0.0094 250.31) 9.7%, oklch(31.59% 0.0093 250.31) 12.9%, oklch(33.39% 0.0092 250.31) 16.1%, oklch(35.34% 0.0090 250.31) 19.4%, oklch(37.40% 0.0089 250.31) 22.6%, oklch(39.57% 0.0088 250.31) 25.8%, oklch(41.84% 0.0086 250.31) 29.0%, oklch(44.20% 0.0085 250.31) 32.3%, oklch(46.62% 0.0083 250.31) 35.5%, oklch(49.11% 0.0082 250.31) 38.7%, oklch(51.64% 0.0080 250.31) 41.9%, oklch(54.20% 0.0078 250.31) 45.2%, oklch(56.78% 0.0077 250.31) 48.4%, oklch(59.36% 0.0075 250.31) 51.6%, oklch(61.95% 0.0073 250.31) 54.8%, oklch(64.51% 0.0072 250.31) 58.1%, oklch(67.04% 0.0070 250.31) 61.3%, oklch(69.52% 0.0068 250.31) 64.5%, oklch(71.94% 0.0067 250.31) 67.7%, oklch(74.30% 0.0065 250.31) 71.0%, oklch(76.57% 0.0064 250.31) 74.2%, oklch(78.74% 0.0062 250.31) 77.4%, oklch(80.81% 0.0061 250.31) 80.6%, oklch(82.75% 0.0060 250.31) 83.9%, oklch(84.55% 0.0059 250.31) 87.1%, oklch(86.21% 0.0058 250.31) 90.3%, oklch(87.70% 0.0057 250.31) 93.5%, oklch(89.02% 0.0056 250.31) 96.8%, oklch(90.16% 0.0055 250.31) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.26 | 0.01 | 250.3 |
| 2 | 0.902 | 0.006 | 250.3 |

## In these collections

- [Soft neutral gradients](https://grabient.com/soft-neutral-gradients)
- [Gray gradients](https://grabient.com/gray-gradients)

## Other forms

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