# White and gray linear gradient

White and gray linear gradient with 7 colors: #f9f6f8, #f1ecef, #e7dee4, #dfd8e2, #dbe1e9, #e9eeeb, #f6f6f4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kS-ALzcQW8_uBJe`
- Page: https://grabient.com/kS-ALzcQW8_uBJe
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: even lightness, neutral, light
- Hues: achromatic
- Contrast of its darkest and lightest colors: 1.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 | `#f9f6f8` | `oklch(97.64% 0.0028 341.72)` | Lynx White | black, 19.5 to 1 |
| 2 | `#f1ecef` | `oklch(94.77% 0.0069 342.35)` | Violet Clues | black, 17.9 to 1 |
| 3 | `#e7dee4` | `oklch(90.93% 0.0124 340.15)` | Precocious Red | black, 15.9 to 1 |
| 4 | `#dfd8e2` | `oklch(88.98% 0.0152 316.36)` | Pastel Day | black, 15 to 1 |
| 5 | `#dbe1e9` | `oklch(90.78% 0.0124 249.35)` | Star Map | black, 15.9 to 1 |
| 6 | `#e9eeeb` | `oklch(94.47% 0.0069 160.74)` | Snail Trail Silver | black, 17.9 to 1 |
| 7 | `#f6f6f4` | `oklch(97.24% 0.0028 96.55)` | Venerable White | black, 19.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f9f6f8 0.0%, #f1ecef 16.7%, #e7dee4 33.3%, #dfd8e2 50.0%, #dbe1e9 66.7%, #e9eeeb 83.3%, #f6f6f4 100.0%);
background: linear-gradient(90deg in oklch, oklch(97.64% 0.0028 341.72) 0.0%, oklch(94.77% 0.0069 342.35) 16.7%, oklch(90.93% 0.0124 340.15) 33.3%, oklch(88.98% 0.0152 316.36) 50.0%, oklch(90.78% 0.0124 249.35) 66.7%, oklch(94.47% 0.0069 160.74) 83.3%, oklch(97.24% 0.0028 96.55) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.976 | 0.003 | 341.7 |
| 2 | 0.89 | 0.015 | 316.4 |
| 3 | 0.972 | 0.003 | 96.6 |

## In these collections

- [White swatches](https://grabient.com/white-swatches)

## Other forms

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