Gradient backgrounds with real grain, pixel and dither finishes. Free previews, no key needed.
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Optional. Only for sized exports (download URLs); previews, palettes and suggestions work without it. Bearer <key> from gradients.studio (studio → account menu → API keys).
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
Palettes to start from: the studio's sixteen, the ones behind product sites people admire (Linear, Stripe, Raycast, …), the account's saved palettes (with an API key), and six tuned starting points for common jobs (website hero, launch post, deck slide, product screenshot, integrations grid, App Store shot) with their full settings. Pass any of these to render_gradient. No key needed.
This tool takes no arguments.
Tool list last changed Oct 25, 2026.
Palettes to start from: the studio's sixteen, the ones behind product sites people admire (Linear, Stripe, Raycast, …), the account's saved palettes (with an API key), and six tuned starting points for common jobs (website hero, launch post, deck slide, product screenshot, integrations grid, App Store shot) with their full settings. Pass any of these to render_gradient. No key needed.
No arguments.
{
"type": "object",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"properties": {},
"additionalProperties": false
}Render a gradient background image (website hero, OG image, launch post, slide, wallpaper) with Gradients Studio's renderer: blobs, stripes or clouds, real grain, pixel and dither finishes, shape overlays. Workflow: start from suggest_settings or list_palettes, call this WITHOUT `size` for a free 960px preview (returned inline, no API key needed), adjust the `settings` you get back, and pass `size` (exact pixels, e.g. [1200, 630] for an OG image, [2560, 1440] for a hero) once the person is happy. A sized export needs an API key; it uses one of the account's monthly exports (5 free, unlimited on Pro) and returns a URL that is valid for 24 hours; asking for the same export again within that time returns the same URL for free. Every result includes `settings` (send them back to iterate) and `studioUrl` (open it to take over in the browser). Use `overlaySvg` with the raw text of a logo SVG to draw it as concentric outlines over the gradient. For the soft mesh look keep blur at 700–900 and contrast at 130; saturated mid-tone colors render best, muddy ones come out dull.
| Argument | Type | Description |
|---|---|---|
| blur | number | Softness of the color fields in export pixels, 0–1000. Keep 700–900 for the soft mesh look; below 500 the blobs show hard edges. |
| seed | integer | Composition seed (integer). Reuse it to keep the layout while changing colors or finish; omit for a random one. |
| size | array | Exact export size in pixels [width, height], each 64–3840, e.g. [1200, 630]. Omit for a free 960px preview (no key needed); giving a size needs an API key and uses one monthly export. |
| grain | number | Film-grain strength 0–0.8. 0.2 is subtle, 0.3+ is visibly textured. Grain also hides banding. |
| sheen | number | Stripes only: highlight along the fibers, 0–2. 0.2 is the default. |
| style | string | 'blobs' (soft overlapping fields), 'stripes' (flowing silk fibers), 'clouds' (billowing volumes) or 'rays' (soft god rays fanning from above). |
| colors* | array | 1–8 gradient colors as #RRGGBB. Three or four is typical. Use saturated mid-tones; muddy or near-grey colors come out dull. |
| detail | number | Clouds only: fine structure, 0–2. |
| effect | string | Finish over the gradient: 'none', 'pixel' (dot matrix) or 'dither' (palette-quantized cells and glyphs). Pixel and dither preview free and export on Pro. |
| format | string |
Turn a plain-language brief ('dark, premium, fintech hero, a bit retro') into two or three starting settings for render_gradient. Understands jobs (hero, launch post, slide, screenshot, integrations, app store), moods and colors, product names (Linear, Stripe, Raycast…), styles (blobs, stripes, clouds) and finishes (retro/pixel, print/dither, terminal/glyph dither, film/grain, smooth). You are the taste layer: preview the candidates and adjust. No key needed.
| Argument | Type | Description |
|---|---|---|
| brief* | string | What the background is for and how it should feel, in plain words: job, mood, colors, a product it should resemble, a finish. |
| aspectRatio | string | Frame shape to suggest for; otherwise inferred from the job (hero → 16:9, post → 4:5, …). |
{
"type": "object",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"required": [
"brief"
],
"properties": {
"brief": {
"type": "string",
"maxLength": 500,
"minLength": 1,
"description": "What the background is for and how it should feel, in plain words: job, mood, colors, a product it should resemble, a finish."
},
"aspectRatio": {
"enum": [
"16:9",
"16:10",
"21:9",
"1.91:1",
"5:2",
"3:1",
"4:1",
"1:1",
"4:3",
"3:2",
"9:16",
"3:4",
"4:5",
"5:3"
],
"type": "string",
"description": "Frame shape to suggest for; otherwise inferred from the job (hero → 16:9, post → 4:5, …)."
}
},
"additionalProperties": false
}| Export file format. JPEG is ~8x smaller; grain makes PNGs large. |
| overlay | string | 'none' or 'shapes' for concentric outlines of one shape radiating from a point. |
| contrast | number | Contrast 50–200 (%). 100 is flat; 130 is the studio default and what makes colors read. Don't lower it for 'subtle', lower grain instead. |
| coverage | number | Clouds only: how much of the frame the clouds fill, 0–2. |
| softness | number | Clouds only: edge softness, 0–2. |
| waviness | number | Stripes only: how much the fibers bend, 0–2. |
| placement | string | Where color points sit: 'center' for a calm middle, 'random' for an off-center composition. |
| effectSize | number | Finish cell size in export pixels, 8–64. 24 default; 40+ reads as deliberate at feed size. |
| overlaySvg | string | Raw text of an SVG (a logo) to draw as concentric outlines; sets overlay to shapes/custom. Up to 64 KB. |
| saturation | number | Saturation 50–200 (%). 100 is neutral; 110–120 keeps the palette alive against grain and dither, which both mute it. |
| aspectRatio | string | Frame shape for a preview, e.g. '16:9' hero, '1.91:1' OG image, '4:5' LinkedIn post, '9:16' story. Ignored when size is given. |
| ditherChars | string | Dither only: characters to draw instead of the built-in symbols, e.g. '01' or '+-'. Up to 16. |
| overlayClip | boolean | Clip instead of rings: the whole gradient is drawn inside the overlay shape, on overlayClipBackground |
| overlayPath | object | Set by the server from overlaySvg; do not pass directly. |
| overlaySize | number | Base shape size in export pixels, 100–3000. |
| fiberDensity | number | Stripes only: how many fibers, 0–2 (1 = designed look). |
| overlayShape | string | Overlay shape: circle, square, rounded, squircle, diamond, triangle, hexagon, star, flower, seal, heart, or 'custom' with overlaySvg. |
| effectOpacity | number | 0–1 blend of the finish over the smooth gradient; 1 replaces it, 0.5 shows both. |
| overlayCenter | array | Ring origin as [x, y] fractions of the frame, e.g. [0.88, 0.18] for top-right; omit for a seeded point. |
| overlayStroke | number | Ring stroke width in export pixels, 1–20. |
| effectStrength | number | Finish density 0–2 (dot size for pixel, glyph density for dither). |
| overlayOpacity | number | Overlay outline opacity 0–1. 0.15–0.4 stays a texture; higher becomes a graphic. |
| overlaySpacing | number | Gap between rings in export pixels, 10–200. |
| backgroundColor* | string | Base color as #RRGGBB. Dark values give the premium look; light ones give pastels. |
| ditherGlyphsOnly | boolean | Dither only: true draws only the characters over the smooth gradient (no cell quantizing). |
| overlayClipBackground | string | Hex color around a clipped shape (off-white by default) |
{
"type": "object",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"required": [
"backgroundColor",
"colors"
],
"properties": {
"blur": {
"type": "number",
"default": 800,
"maximum": 1000,
"minimum": 0,
"description": "Softness of the color fields in export pixels, 0–1000. Keep 700–900 for the soft mesh look; below 500 the blobs show hard edges."
},
"seed": {
"type": "integer",
"default": 3958515672,
"maximum": 4294967295,
"minimum": 0,
"description": "Composition seed (integer). Reuse it to keep the layout while changing colors or finish; omit for a random one."
},
"size": {
"type": "array",
"description": "Exact export size in pixels [width, height], each 64–3840, e.g. [1200, 630]. Omit for a free 960px preview (no key needed); giving a size needs an API key and uses one monthly export.",
"prefixItems": [
{
"type": "integer",
"maximum": 3840,
"minimum": 64
},
{
"type": "integer",
"maximum": 3840,
"minimum": 64
}
]
},
"grain": {
"type": "number",
"default": 0.2,
"maximum": 0.8,
"minimum": 0,
"description": "Film-grain strength 0–0.8. 0.2 is subtle, 0.3+ is visibly textured. Grain also hides banding."
},
"sheen": {
"type": "number",
"default": 0.2,
"maximum": 2,
"minimum": 0,
"description": "Stripes only: highlight along the fibers, 0–2. 0.2 is the default."
},
"style": {
"enum": [
"blobs",
"stripes",
"clouds",
"rays"
],
"type": "string",
"default": "blobs",
"description": "'blobs' (soft overlapping fields), 'stripes' (flowing silk fibers), 'clouds' (billowing volumes) or 'rays' (soft god rays fanning from above)."
},
"colors": {
"type": "array",
"items": {
"type": "string",
"pattern": "^#[0-9a-fA-F]{6}$"
},
"maxItems": 8,
"minItems": 1,
"description": "1–8 gradient colors as #RRGGBB. Three or four is typical. Use saturated mid-tones; muddy or near-grey colors come out dull."
},
"detail": {
"type": "number",
"default": 1,
"maximum": 2,
"minimum": 0,
"description": "Clouds only: fine structure, 0–2."
},
"effect": {
"enum": [
"none",
"pixel",
"dither"
],
"type": "string",
"default": "none",
"description": "Finish over the gradient: 'none', 'pixel' (dot matrix) or 'dither' (palette-quantized cells and glyphs). Pixel and dither preview free and export on Pro."
},
"format": {
"enum": [
"jpeg",
"png"
],
"type": "string",
"default": "jpeg",
"description": "Export file format. JPEG is ~8x smaller; grain makes PNGs large."
},
"overlay": {
"enum": [
"none",
"shapes"
],
"type": "string",
"default": "none",
"description": "'none' or 'shapes' for concentric outlines of one shape radiating from a point."
},
"contrast": {
"type": "number",
"default": 130,
"maximum": 200,
"minimum": 50,
"description": "Contrast 50–200 (%). 100 is flat; 130 is the studio default and what makes colors read. Don't lower it for 'subtle', lower grain instead."
},
"coverage": {
"type": "number",
"default": 1,
"maximum": 2,
"minimum": 0,
"description": "Clouds only: how much of the frame the clouds fill, 0–2."
},
"softness": {
"type": "number",
"default": 1,
"maximum": 2,
"minimum": 0,
"description": "Clouds only: edge softness, 0–2."
},
"waviness": {
"type": "number",
"default": 1,
"maximum": 2,
"minimum": 0,
"description": "Stripes only: how much the fibers bend, 0–2."
},
"placement": {
"enum": [
"center",
"random"
],
"type": "string",
"default": "random",
"description": "Where color points sit: 'center' for a calm middle, 'random' for an off-center composition."
},
"effectSize": {
"type": "number",
"default": 24,
"maximum": 64,
"minimum": 8,
"description": "Finish cell size in export pixels, 8–64. 24 default; 40+ reads as deliberate at feed size."
},
"overlaySvg": {
"type": "string",
"maxLength": 64000,
"description": "Raw text of an SVG (a logo) to draw as concentric outlines; sets overlay to shapes/custom. Up to 64 KB."
},
"saturation": {
"type": "number",
"default": 110,
"maximum": 200,
"minimum": 50,
"description": "Saturation 50–200 (%). 100 is neutral; 110–120 keeps the palette alive against grain and dither, which both mute it."
},
"aspectRatio": {
"enum": [
"16:9",
"16:10",
"21:9",
"1.91:1",
"5:2",
"3:1",
"4:1",
"1:1",
"4:3",
"3:2",
"9:16",
"3:4",
"4:5",
"5:3"
],
"type": "string",
"default": "16:9",
"description": "Frame shape for a preview, e.g. '16:9' hero, '1.91:1' OG image, '4:5' LinkedIn post, '9:16' story. Ignored when size is given."
},
"ditherChars": {
"type": "string",
"default": "",
"maxLength": 32,
"description": "Dither only: characters to draw instead of the built-in symbols, e.g. '01' or '+-'. Up to 16."
},
"overlayClip": {
"type": "boolean",
"default": false,
"description": "Clip instead of rings: the whole gradient is drawn inside the overlay shape, on overlayClipBackground"
},
"overlayPath": {
"type": "object",
"required": [
"d",
"box"
],
"properties": {
"d": {
"type": "string",
"pattern": "^[MmZzLlHhVvCcSsQqTtAa0-9eE.,\\s+-]+$",
"maxLength": 70000,
"minLength": 1
},
"box": {
"type": "array",
"prefixItems": [
{
"type": "number"
},
{
"type": "number"
},
{
"type": "number",
"exclusiveMinimum": 0
},
{
"type": "number",
"exclusiveMinimum": 0
}
]
},
"parts": {
"type": "array",
"items": {
"type": "object",
"required": [
"d"
],
"properties": {
"d": {
"type": "string",
"pattern": "^[MmZzLlHhVvCcSsQqTtAa0-9eE.,\\s+-]+$",
"maxLength": 70000,
"minLength": 1
},
"m": {
"type": "array",
"prefixItems": [
{
"type": "number"
},
{
"type": "number"
},
{
"type": "number"
},
{
"type": "number"
},
{
"type": "number"
},
{
"type": "number"
}
]
},
"rule": {
"type": "string",
"const": "evenodd"
},
"knock": {
"type": "boolean",
"const": true
},
"stroke": {
"type": "number",
"maximum": 10000,
"exclusiveMinimum": 0
}
},
"additionalProperties": false
},
"maxItems": 600
}
},
"description": "Set by the server from overlaySvg; do not pass directly.",
"additionalProperties": false
},
"overlaySize": {
"type": "number",
"default": 800,
"maximum": 3000,
"minimum": 100,
"description": "Base shape size in export pixels, 100–3000."
},
"fiberDensity": {
"type": "number",
"default": 1,
"maximum": 2,
"minimum": 0,
"description": "Stripes only: how many fibers, 0–2 (1 = designed look)."
},
"overlayShape": {
"enum": [
"circle",
"square",
"rounded",
"squircle",
"diamond",
"triangle",
"hexagon",
"star",
"flower",
"seal",
"heart",
"custom"
],
"type": "string",
"default": "circle",
"description": "Overlay shape: circle, square, rounded, squircle, diamond, triangle, hexagon, star, flower, seal, heart, or 'custom' with overlaySvg."
},
"effectOpacity": {
"type": "number",
"default": 1,
"maximum": 1,
"minimum": 0,
"description": "0–1 blend of the finish over the smooth gradient; 1 replaces it, 0.5 shows both."
},
"overlayCenter": {
"type": "array",
"description": "Ring origin as [x, y] fractions of the frame, e.g. [0.88, 0.18] for top-right; omit for a seeded point.",
"prefixItems": [
{
"type": "number",
"maximum": 1,
"minimum": 0
},
{
"type": "number",
"maximum": 1,
"minimum": 0
}
]
},
"overlayStroke": {
"type": "number",
"default": 3,
"maximum": 20,
"minimum": 1,
"description": "Ring stroke width in export pixels, 1–20."
},
"effectStrength": {
"type": "number",
"default": 1,
"maximum": 2,
"minimum": 0,
"description": "Finish density 0–2 (dot size for pixel, glyph density for dither)."
},
"overlayOpacity": {
"type": "number",
"default": 0.4,
"maximum": 1,
"minimum": 0,
"description": "Overlay outline opacity 0–1. 0.15–0.4 stays a texture; higher becomes a graphic."
},
"overlaySpacing": {
"type": "number",
"default": 60,
"maximum": 200,
"minimum": 10,
"description": "Gap between rings in export pixels, 10–200."
},
"backgroundColor": {
"type": "string",
"pattern": "^#[0-9a-fA-F]{6}$",
"description": "Base color as #RRGGBB. Dark values give the premium look; light ones give pastels."
},
"ditherGlyphsOnly": {
"type": "boolean",
"default": false,
"description": "Dither only: true draws only the characters over the smooth gradient (no cell quantizing)."
},
"overlayClipBackground": {
"type": "string",
"default": "#F6F5F1",
"pattern": "^#[0-9a-fA-F]{6}$",
"description": "Hex color around a clipped shape (off-white by default)"
}
},
"additionalProperties": false
}