Type the vibe.
Ship the background.

Gradients Studio lives inside Claude Code, Cursor and every MCP client. Say “dark, grainy, a little retro” and your agent renders it, previews it for free, then drops the finished file straight into your repo.

Install free

Free previews, no key · 5 free exports a month

Install in a minute

No key to start. Previews, palettes and suggestions work as soon as the server is added; a key is only for exports.

Claude Code

claude mcp add gradients --transport http https://www.gradients.studio/mcp

Cursor, Claude Desktop, Windsurf and others

Add to Cursor

{
  "mcpServers": {
    "gradients": {
      "url": "https://www.gradients.studio/mcp"
    }
  }
}

Then try: “Add a dark, grainy hero background to the landing page, 2560×1440, something like Linear.”

Exports at exact sizes take a free key

Sign in to the studio, create a key from the account menu, and add it to the server as a header. 5 exports a month are free.

Get a key

claude mcp add gradients --transport http https://www.gradients.studio/mcp --header "Authorization: Bearer <your key>"

Other clients: add "headers": { "Authorization": "Bearer <your key>" } next to the url.

Three tools

Everything the studio can do, as calls your agent can make.

render_gradient
Every dial the studio has: style, palette, seed, grain, pixel and dither finishes, shape overlays, or your logo as an SVG. Without a size it returns a free 960px preview inline so the agent can look before it commits. With a size, exact pixels, it returns a download URL.
list_palettes
The studio's sixteen palettes, the ones behind sites you already admire (Linear, Stripe, Raycast, Lovable, Dia…), your saved palettes, and six tuned starting points for the jobs designers ship: website hero, launch post, deck slide, product screenshot, website graphics, App Store shot.
suggest_settings
A brief in plain words, such as “dark, premium, fintech hero, a bit retro”, becomes two or three starting points. It understands jobs, moods, product names, styles and finishes. Your agent is the taste layer; this narrows thirty dials to a few good defaults.

Look, then commit

The loop is preview, adjust, preview again. Previews are free, so the agent can iterate as long as it needs. A sized export is the only metered call, and the settings come back with every result so nothing has to be reconstructed.

Your logo, as the overlay

Pass the raw text of an SVG and the server draws it over the gradient, the same feature the studio has for uploaded shapes. The agent already has the file on disk; nothing to upload.

Questions

What does it cost?

Previews are free and need no key or account. Sized exports use the same pool as the web: 5 free a month, unlimited on Pro ($15 a month or $96 a year).

Does an agent retrying burn my exports?

No. Asking for the same export twice within 24 hours returns the same URL and costs nothing. Only a new set of settings at a size counts.

Which clients work?

Anything that speaks MCP over Streamable HTTP: Claude Code, Claude Desktop, Cursor, Codex, Windsurf, VS Code, Gemini CLI and the MCP Inspector. The server is stateless, so there is nothing to keep alive.

Can I take over in the studio?

Every result includes a studio link with the exact settings, so you can open it in the browser, adjust by hand and export from there.

Do I need an account to try it?

No. Without a key your agent can list palettes, turn a brief into settings and render as many 960px previews as it needs. A key, from a free account, is only for exports at an exact size.

Where does my key live?

Create it in the studio under your account menu. It is shown once; we store only a hash. Revoke it from the same place.

Add it now, get a key when you export

Paste the install line and your agent previews straight away. Create a key from the studio's account menu when you want the file.