# Neutral gradients

21 named neutral gradients from the two open corpora we bundle (uiGradients and WebGradients, both MIT) — greys, off-whites and near-blacks — the subtle surfaces that band worst at 1440px, where the banding line in each report matters more than the contrast one. Each has its own page with the CSS and Tailwind v4 to copy, a worst-case contrast verdict for white and black text, and an "open in the maker" link that carries the whole gradient in the URL.

- Page: https://brandsweets.com/gradients/neutral
- Count: 21

## Gradients

### Heavy Rain

- Slug: `heavy-rain` · Page: https://brandsweets.com/gradients/heavy-rain
- Stops: #cfd9df, #e2ebf0 · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #cfd9df 0%, #e2ebf0 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#cfd9df] to-[#e2ebf0]`
- Contrast (worst point): white 1.21:1 fail · black 14.64:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.cfd9df-e2ebf0?a=0
- Colors: https://brandsweets.com/colors/cfd9df, https://brandsweets.com/colors/e2ebf0

### Cloudy Knoxville

- Slug: `cloudy-knoxville` · Page: https://brandsweets.com/gradients/cloudy-knoxville
- Stops: #fdfbfb, #ebedee · angle 120° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(120deg in oklab, #fdfbfb 0%, #ebedee 100%)`
- Tailwind: `bg-linear-120/oklab from-[#fdfbfb] to-[#ebedee]`
- Contrast (worst point): white 1.03:1 fail · black 17.88:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.fdfbfb-ebedee?a=120
- Colors: https://brandsweets.com/colors/fdfbfb, https://brandsweets.com/colors/ebedee

### Coup de Grace

- Slug: `coup-de-grace` · Page: https://brandsweets.com/gradients/coup-de-grace
- Stops: #dcd9d4, #dcd9d4 · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #dcd9d4 0%, #dcd9d4 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#dcd9d4] to-[#dcd9d4]`
- Contrast (worst point): white 1.41:1 fail · black 14.92:1 AA · banding low
- Maker: https://brandsweets.com/gradients/new/v1.dcd9d4-dcd9d4?a=0
- Colors: https://brandsweets.com/colors/dcd9d4, https://brandsweets.com/colors/dcd9d4

### Loon Crest

- Slug: `loon-crest` · Page: https://brandsweets.com/gradients/loon-crest
- Stops: #989898, #989898 · angle 0° · source webgradients
- Families: neutral · Moods: neutral
- CSS: `linear-gradient(0deg in oklab, #989898 0%, #989898 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#989898] to-[#989898]`
- Contrast (worst point): white 2.88:1 fail · black 7.28:1 AA · banding low
- Maker: https://brandsweets.com/gradients/new/v1.989898-989898?a=0
- Colors: https://brandsweets.com/colors/989898, https://brandsweets.com/colors/989898

### Snow Again

- Slug: `snow-again` · Page: https://brandsweets.com/gradients/snow-again
- Stops: #e6e9f0, #eef1f5 · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #e6e9f0 0%, #eef1f5 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#e6e9f0] to-[#eef1f5]`
- Contrast (worst point): white 1.13:1 fail · black 17.28:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.e6e9f0-eef1f5?a=0
- Colors: https://brandsweets.com/colors/e6e9f0, https://brandsweets.com/colors/eef1f5

### Above Clouds

- Slug: `above-clouds` · Page: https://brandsweets.com/gradients/above-clouds
- Stops: #bdbbbe, #9d9ea3 · angle 0° · source webgradients
- Families: neutral · Moods: neutral
- CSS: `linear-gradient(0deg in oklab, #bdbbbe 0%, #9d9ea3 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#bdbbbe] to-[#9d9ea3]`
- Contrast (worst point): white 1.91:1 fail · black 7.85:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.bdbbbe-9d9ea3?a=0
- Colors: https://brandsweets.com/colors/bdbbbe, https://brandsweets.com/colors/9d9ea3

### Sharp Glass

- Slug: `sharp-glass` · Page: https://brandsweets.com/gradients/sharp-glass
- Stops: #c9ccd3, #c9ccd3 · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #c9ccd3 0%, #c9ccd3 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#c9ccd3] to-[#c9ccd3]`
- Contrast (worst point): white 1.61:1 fail · black 13.06:1 AA · banding low
- Maker: https://brandsweets.com/gradients/new/v1.c9ccd3-c9ccd3?a=0
- Colors: https://brandsweets.com/colors/c9ccd3, https://brandsweets.com/colors/c9ccd3

### Premium Dark

- Slug: `premium-dark` · Page: https://brandsweets.com/gradients/premium-dark
- Stops: #434343, #000000 · angle 0° · source webgradients
- Families: neutral · Moods: dark, neutral
- CSS: `linear-gradient(0deg in oklab, #434343 0%, #000000 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#434343] to-[#000000]`
- Contrast (worst point): white 9.89:1 AA · black 1.00:1 fail · banding medium
- Maker: https://brandsweets.com/gradients/new/v1.434343-000000?a=0
- Colors: https://brandsweets.com/colors/434343, https://brandsweets.com/colors/000000

### Mountain Rock

- Slug: `mountain-rock` · Page: https://brandsweets.com/gradients/mountain-rock
- Stops: #868f96, #596164 · angle 0° · source webgradients
- Families: neutral · Moods: neutral
- CSS: `linear-gradient(0deg in oklab, #868f96 0%, #596164 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#868f96] to-[#596164]`
- Contrast (worst point): white 3.29:1 AA-large · black 3.32:1 AA-large · banding high
- Maker: https://brandsweets.com/gradients/new/v1.868f96-596164?a=0
- Colors: https://brandsweets.com/colors/868f96, https://brandsweets.com/colors/596164

### Premium White

- Slug: `premium-white` · Page: https://brandsweets.com/gradients/premium-white
- Stops: #d5d4d0 @0%, #d5d4d0 @1%, #eeeeec @31% · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%)`
- Tailwind: `bg-linear-to-t/oklab from-[#d5d4d0] via-[#d5d4d0] via-1% to-[#eeeeec] to-31%`
- Contrast (worst point): white 1.16:1 fail · black 14.16:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.d5d4d0_0-d5d4d0_1-eeeeec_31?a=0
- Colors: https://brandsweets.com/colors/d5d4d0, https://brandsweets.com/colors/d5d4d0, https://brandsweets.com/colors/eeeeec

### Risky Concrete

- Slug: `risky-concrete` · Page: https://brandsweets.com/gradients/risky-concrete
- Stops: #c4c5c7 @0%, #dcdddf @52%, #ebebeb @100% · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#c4c5c7] via-[#dcdddf] via-52% to-[#ebebeb]`
- Contrast (worst point): white 1.19:1 fail · black 12.16:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.c4c5c7_0-dcdddf_52-ebebeb_100?a=0
- Colors: https://brandsweets.com/colors/c4c5c7, https://brandsweets.com/colors/dcdddf, https://brandsweets.com/colors/ebebeb

### Elegance

- Slug: `elegance` · Page: https://brandsweets.com/gradients/elegance
- Stops: #eadfdf @59%, #ece2df @100% · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #eadfdf 59%, #ece2df 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#eadfdf] from-59% to-[#ece2df]`
- Contrast (worst point): white 1.27:1 fail · black 16.12:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.eadfdf_59-ece2df_100?a=0
- Colors: https://brandsweets.com/colors/eadfdf, https://brandsweets.com/colors/ece2df

### Above The Sky

- Slug: `above-the-sky` · Page: https://brandsweets.com/gradients/above-the-sky
- Stops: #d3d3d3 @0%, #d3d3d3 @1%, #e0e0e0 @26% · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #d3d3d3 0%, #d3d3d3 1%, #e0e0e0 26%)`
- Tailwind: `bg-linear-to-t/oklab from-[#d3d3d3] via-[#d3d3d3] via-1% to-[#e0e0e0] to-26%`
- Contrast (worst point): white 1.32:1 fail · black 14.03:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.d3d3d3_0-d3d3d3_1-e0e0e0_26?a=0
- Colors: https://brandsweets.com/colors/d3d3d3, https://brandsweets.com/colors/d3d3d3, https://brandsweets.com/colors/e0e0e0

### Chemic Aqua

- Slug: `chemic-aqua` · Page: https://brandsweets.com/gradients/chemic-aqua
- Stops: #cddcdc, #cddcdc · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #cddcdc 0%, #cddcdc 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#cddcdc] to-[#cddcdc]`
- Contrast (worst point): white 1.41:1 fail · black 14.87:1 AA · banding low
- Maker: https://brandsweets.com/gradients/new/v1.cddcdc-cddcdc?a=0
- Colors: https://brandsweets.com/colors/cddcdc, https://brandsweets.com/colors/cddcdc

### Full Metal

- Slug: `full-metal` · Page: https://brandsweets.com/gradients/full-metal
- Stops: #d5dee7, #e8ebf2, #e2e7ed · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #d5dee7 0%, #e8ebf2 50%, #e2e7ed 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#d5dee7] via-[#e8ebf2] to-[#e2e7ed]`
- Contrast (worst point): white 1.19:1 fail · black 15.43:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.d5dee7-e8ebf2-e2e7ed?a=0
- Colors: https://brandsweets.com/colors/d5dee7, https://brandsweets.com/colors/e8ebf2, https://brandsweets.com/colors/e2e7ed

### Glass Water

- Slug: `glass-water` · Page: https://brandsweets.com/gradients/glass-water
- Stops: #dfe9f3, #ffffff · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #dfe9f3 0%, #ffffff 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#dfe9f3] to-[#ffffff]`
- Contrast (worst point): white 1.00:1 fail · black 17.09:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.dfe9f3-ffffff?a=0
- Colors: https://brandsweets.com/colors/dfe9f3, https://brandsweets.com/colors/ffffff

### Slick Carbon

- Slug: `slick-carbon` · Page: https://brandsweets.com/gradients/slick-carbon
- Stops: #323232 @0%, #3f3f3f @40%, #1c1c1c @100% · angle 180° · source webgradients
- Families: neutral · Moods: dark, neutral
- CSS: `linear-gradient(180deg in oklab, #323232 0%, #3f3f3f 40%, #1c1c1c 100%)`
- Tailwind: `bg-linear-to-b/oklab from-[#323232] via-[#3f3f3f] via-40% to-[#1c1c1c]`
- Contrast (worst point): white 10.53:1 AA · black 1.23:1 fail · banding high
- Maker: https://brandsweets.com/gradients/new/v1.323232_0-3f3f3f_40-1c1c1c_100?a=180
- Colors: https://brandsweets.com/colors/323232, https://brandsweets.com/colors/3f3f3f, https://brandsweets.com/colors/1c1c1c

### Earl Gray

- Slug: `earl-gray` · Page: https://brandsweets.com/gradients/earl-gray
- Stops: #e4e4e1, #e4e4e1 · angle 0° · source webgradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(0deg in oklab, #e4e4e1 0%, #e4e4e1 100%)`
- Tailwind: `bg-linear-to-t/oklab from-[#e4e4e1] to-[#e4e4e1]`
- Contrast (worst point): white 1.27:1 fail · black 16.48:1 AA · banding low
- Maker: https://brandsweets.com/gradients/new/v1.e4e4e1-e4e4e1?a=0
- Colors: https://brandsweets.com/colors/e4e4e1, https://brandsweets.com/colors/e4e4e1

### Midnight City

- Slug: `midnight-city` · Page: https://brandsweets.com/gradients/midnight-city
- Stops: #232526, #414345 · angle 90° · source uigradients
- Families: neutral · Moods: dark, neutral
- CSS: `linear-gradient(90deg in oklab, #232526 0%, #414345 100%)`
- Tailwind: `bg-linear-to-r/oklab from-[#232526] to-[#414345]`
- Contrast (worst point): white 9.94:1 AA · black 1.36:1 fail · banding high
- Maker: https://brandsweets.com/gradients/new/v1.232526-414345?a=90
- Colors: https://brandsweets.com/colors/232526, https://brandsweets.com/colors/414345

### Clouds

- Slug: `clouds` · Page: https://brandsweets.com/gradients/clouds
- Stops: #ece9e6, #ffffff · angle 90° · source uigradients
- Families: neutral · Moods: light, neutral
- CSS: `linear-gradient(90deg in oklab, #ece9e6 0%, #ffffff 100%)`
- Tailwind: `bg-linear-to-r/oklab from-[#ece9e6] to-[#ffffff]`
- Contrast (worst point): white 1.00:1 fail · black 17.36:1 AA · banding high
- Maker: https://brandsweets.com/gradients/new/v1.ece9e6-ffffff?a=90
- Colors: https://brandsweets.com/colors/ece9e6, https://brandsweets.com/colors/ffffff

### Deep Space

- Slug: `deep-space` · Page: https://brandsweets.com/gradients/deep-space
- Stops: #000000, #434343 · angle 90° · source uigradients
- Families: neutral · Moods: dark, neutral
- CSS: `linear-gradient(90deg in oklab, #000000 0%, #434343 100%)`
- Tailwind: `bg-linear-to-r/oklab from-[#000000] to-[#434343]`
- Contrast (worst point): white 9.89:1 AA · black 1.00:1 fail · banding medium
- Maker: https://brandsweets.com/gradients/new/v1.000000-434343?a=90
- Colors: https://brandsweets.com/colors/000000, https://brandsweets.com/colors/434343

## Gradient maker

Every maker URL is the gradient's state: `/gradients/new/v1.<hex>-<hex>[_pos]?a=135&in=oklch&hue=shorter&e=soft&g=8`. Hand one to a human, let them refine, and read the link they return.

## Connect an agent

Point any MCP client at the BrandSweets gradients endpoint for the same engine and corpus:

- Endpoint: https://mcp.brandsweets.com/gradients/mcp
- Tools: `make_gradient` (2–5 colours → CSS with the interpolation space, Tailwind v4, SVG, PNG URL, DTCG token + the contrast/banding/gamut report), `brand_gradients` (brand slug or palette → brand gradient, hero, button, variants).
- Resource: `gradients://corpus` — the whole bundled corpus as JSON.