Aa
Named gradient · WebGradients
Space Shift
Space Shift is a blue gradient from WebGradients (MIT) — #3d3393 → #2b76b9 → #2cacd1 → #35eb93 at 60°. Shown here interpolated in OKLab, next to the original sRGB, with the worst-case contrast for white and black text and every export.
Aa — the quick brown fox
black text · worst 2.09:1 · fails
white 1.56 failsblack 2.09 failsbanding medium
Same stops, three spaces
The source renders this in sRGB. The number is how much chroma survives at the dullest point along the line — the difference between the first bar and the others is the grey that OKLab removes.
sRGB67%
OKLab68%
OKLCH70%
Report
- white ink: worst 1.56:1 at 100% (fails AA); black ink: worst 2.09:1 at 0% (fails AA) → use black text.
- Neither ink passes AA at the worst point — treat as decorative or add a scrim (rgba(0,0,0,.35) typically lifts white ink past 4:1).
- Banding medium: ~8px bands at 1440px — add grain 16 (≈2% soft-light noise) or shorten the ramp.
Export
css
.gradient {
background-image: linear-gradient(60deg, #3d3393 0%, #3d3896 2.64%, #3d3d98 5.29%, #3c429b 7.93%, #3c479e 10.57%, #3b4ca1 13.21%, #3a51a3 15.86%, #3955a6 18.5%, #385aa9 21.14%, #375fac 23.79%, #3563ae 26.43%, #3368b1 29.07%, #316db4 31.71%, #2e71b6 34.36%, #2b76b9 37%, #2b7abb 39%, #2b7ebd 41%, #2b82be 43%, #2b85c0 45%, #2b89c2 47%, #2b8dc4 49%, #2c91c5 51%, #2c95c7 53%, #2c99c9 55%, #2c9cca 57%, #2ca0cc 59%, #2ca4ce 61%, #2ca8cf 63%, #2cacd1 65%, #2bb1ce 67.5%, #2bb6ca 70%, #2bbac6 72.5%, #2bbfc3 75%, #2bc3bf 77.5%, #2bc8bb 80%, #2cccb6 82.5%, #2cd1b2 85%, #2dd5ad 87.5%, #2fdaa9 90%, #30dea4 92.5%, #31e29e 95%, #33e799 97.5%, #35eb93 100%);
background-image: linear-gradient(60deg in oklab, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
}tailwind v4
bg-[linear-gradient(60deg_in_oklab,#3d3393_0%,#2b76b9_37%,#2cacd1_65%,#35eb93_100%)]
svg
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="600" viewBox="0 0 1440 600"><defs><linearGradient id="bs-gradient" gradientUnits="userSpaceOnUse" x1="50.0962" y1="686.7691" x2="1389.9038" y2="-86.7691"><stop offset="0%" stop-color="#3d3393"/><stop offset="2.64%" stop-color="#3d3896"/><stop offset="5.29%" stop-color="#3d3d98"/><stop offset="7.93%" stop-color="#3c429b"/><stop offset="10.57%" stop-color="#3c479e"/><stop offset="13.21%" stop-color="#3b4ca1"/><stop offset="15.86%" stop-color="#3a51a3"/><stop offset="18.5%" stop-color="#3955a6"/><stop offset="21.14%" stop-color="#385aa9"/><stop offset="23.79%" stop-color="#375fac"/><stop offset="26.43%" stop-color="#3563ae"/><stop offset="29.07%" stop-color="#3368b1"/><stop offset="31.71%" stop-color="#316db4"/><stop offset="34.36%" stop-color="#2e71b6"/><stop offset="37%" stop-color="#2b76b9"/><stop offset="39%" stop-color="#2b7abb"/><stop offset="41%" stop-color="#2b7ebd"/><stop offset="43%" stop-color="#2b82be"/><stop offset="45%" stop-color="#2b85c0"/><stop offset="47%" stop-color="#2b89c2"/><stop offset="49%" stop-color="#2b8dc4"/><stop offset="51%" stop-color="#2c91c5"/><stop offset="53%" stop-color="#2c95c7"/><stop offset="55%" stop-color="#2c99c9"/><stop offset="57%" stop-color="#2c9cca"/><stop offset="59%" stop-color="#2ca0cc"/><stop offset="61%" stop-color="#2ca4ce"/><stop offset="63%" stop-color="#2ca8cf"/><stop offset="65%" stop-color="#2cacd1"/><stop offset="67.5%" stop-color="#2bb1ce"/><stop offset="70%" stop-color="#2bb6ca"/><stop offset="72.5%" stop-color="#2bbac6"/><stop offset="75%" stop-color="#2bbfc3"/><stop offset="77.5%" stop-color="#2bc3bf"/><stop offset="80%" stop-color="#2bc8bb"/><stop offset="82.5%" stop-color="#2cccb6"/><stop offset="85%" stop-color="#2cd1b2"/><stop offset="87.5%" stop-color="#2dd5ad"/><stop offset="90%" stop-color="#2fdaa9"/><stop offset="92.5%" stop-color="#30dea4"/><stop offset="95%" stop-color="#31e29e"/><stop offset="97.5%" stop-color="#33e799"/><stop offset="100%" stop-color="#35eb93"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
dtcg
{
"space-shift": {
"$type": "gradient",
"$value": [
{
"color": {
"colorSpace": "srgb",
"components": [
0.239,
0.2,
0.576
],
"hex": "#3d3393"
},
"position": 0
},
{
"color": {
"colorSpace": "srgb",
"components": [
0.169,
0.463,
0.725
],
"hex": "#2b76b9"
},
"position": 0.37
},
{
"color": {
"colorSpace": "srgb",
"components": [
0.173,
0.675,
0.82
],
"hex": "#2cacd1"
},
"position": 0.65
},
{
"color": {
"colorSpace": "srgb",
"components": [
0.208,
0.922,
0.576
],
"hex": "#35eb93"
},
"position": 1
}
],
"$extensions": {
"com.brandsweets": {
"kind": "linear",
"css": "linear-gradient(60deg in oklab, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)",
"interpolation": "oklab",
"angle": 60,
"name": "Space Shift",
"contrast": {
"white": {
"ratio": 1.56,
"at": 0.9979,
"passesAA": false,
"passesAALarge": false
},
"black": {
"ratio": 2.093,
"at": 0,
"passesAA": false,
"passesAALarge": false
},
"suggestedInk": "#000000"
}
}
},
"$description": "Space Shift (WebGradients, MIT), rendered in OKLab."
}
}Tagged
More blue gradients
mcpConnect your agent to the gradient engine
live endpointPoint any MCP client at the shared gradients endpoint and your agent gets the same engine as this page — make_gradient returns CSS with the interpolation space, Tailwind v4, SVG, a PNG URL, a DTCG token and the contrast report in one call; brand_gradients derives the whole contact sheet from a brand or a palette. Read-only, no key. Every gradient is a /gradients/new/… link: open it, refine, paste it back.
endpoint
https://mcp.brandsweets.com/gradients/mcpclaude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp
try this prompt
›take the Space Shift gradient (#3d3393, #2b76b9, #2cacd1, #35eb93), re-interpolate it in oklch, and tell me the worst-case contrast for white text
Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.
Machine-readable: gradients.md · From WebGradients (MIT) — licences