Gradient maker
Same stops, three spaces
Click a bar to interpolate there. The number is how much chroma survives at the dullest point.
* some samples left sRGB and were gamut-mapped (slight hue drift there). Grey/white endpoints carry the other stop's hue (powerless hue), so green→white stays green.
Contrast along the line
WCAG ratio for white and black ink at every point. Shaded = below 4.5:1 for black ink. The marker is the exact worst point.
Easing
Stops are not evenly spaced. x = stop position, y = mix amount. Baked into 12–16 stops, or one colour-hint when that is within 0.02.
Easing does not apply to a mesh.
Derive from a palette or brand
Paste hexes (primary first) or a public brand slug. Every type is a pure function of the palette — the same contact sheet an agent gets from brand_gradients.
Export
CSS with the interpolation space, Tailwind v4, SVG with correct geometry, a DTCG token, and the PNG.
Apply this to a brand → sign in
.gradient {
background-color: #9795ee;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.858' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -12'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.012'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"), radial-gradient(circle farthest-corner at 6.16% 12.62%, rgba(99, 91, 255, 0.72) 0%, rgba(99, 91, 255, 0) 50.06%), radial-gradient(circle farthest-corner at 95.51% 53.69%, rgba(144, 137, 252, 0.875) 0%, rgba(144, 137, 252, 0) 55.68%), radial-gradient(circle farthest-corner at 45.23% 15.03%, rgba(255, 128, 181, 0.728) 0%, rgba(255, 128, 181, 0) 49.83%), radial-gradient(circle farthest-corner at 37.97% 64.32%, rgba(0, 212, 255, 0.809) 0%, rgba(0, 212, 255, 0) 46.1%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.858' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -12'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.012'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"), radial-gradient(circle farthest-corner at 6.16% 12.62%, oklch(from #635bff l c h / 0.72) 0%, rgb(from #635bff r g b / 0) 50.06%), radial-gradient(circle farthest-corner at 95.51% 53.69%, oklch(from #9089fc l c h / 0.8751) 0%, rgb(from #9089fc r g b / 0) 55.68%), radial-gradient(circle farthest-corner at 45.23% 15.03%, oklch(from #ff80b5 l c h / 0.7283) 0%, rgb(from #ff80b5 r g b / 0) 49.83%), radial-gradient(circle farthest-corner at 37.97% 64.32%, oklch(from #00d4ff l c h / 0.8087) 0%, rgb(from #00d4ff r g b / 0) 46.1%);
background-size: 160px 160px, auto, auto, auto, auto;
background-blend-mode: soft-light, normal, normal, normal, normal;
}
/* or keep the gradient untouched and overlay the grain: */
.gradient {
position: relative;
isolation: isolate;
}
.gradient::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.858' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -12'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 160px 160px;
image-rendering: pixelated;
mix-blend-mode: soft-light;
opacity: 0.0124;
}Point 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.
https://mcp.brandsweets.com/gradients/mcpclaude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp
›derive a hero gradient from #635bff and #00d4ff that passes AA for white text
https://brandsweets.com/gradients/new/v1.635bff-00d4ff-ff80b5-9089fc?k=mesh&g=6&seed=1
Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.