Gradients Studio

studio.gradientsPublished by gradients.studioOfficial publisherv1.1.0Updated Nov 2, 2026

Gradient backgrounds with real grain, pixel and dither finishes. Free previews, no key needed.

VerifiedStreamable HTTPWeb executableDeveloper ToolsMedia & Design

Overview

AI-generated overview

Gradients Studio renders gradient background images (heroes, OG images, slides) from plain-language briefs, with free previews and keyed exact-size exports.

What you can do
  • Turn a plain-language brief into two or three starting settings for a gradient render
  • Browse the studio's palettes, palettes behind well-known product sites, and tuned starting points for common jobs
  • Render gradient backgrounds with blobs, stripes, clouds or rays, grain, pixel and dither finishes, and shape or logo overlays
  • Get a free inline 960px preview, or an exact-size export with a download URL when a size is given
  • Return the settings used and a studio link so the result can be iterated or taken over in the browser
When to use it
Useful when a coding agent needs background artwork for a website hero, OG image, launch post, deck slide, app store asset or wallpaper and should produce it at the exact size the layout needs, starting from a short description rather than a design tool.
Requirements
A remote Streamable HTTP endpoint at the server's URL; nothing to build or run locally. Previews, palettes and suggestions need no account. Exact-size exports need a free API key from the studio account, sent as an Authorization Bearer header (or the GRADIENTS_STUDIO_KEY environment variable with the Claude Code plugin).
Before you install
The API key is shown only once and is sent as an Authorization Bearer header; keep it out of shared configs. Sized exports draw on a monthly pool (5 free, unlimited on Pro) and are capped at 200 a day, so heavy use may require a paid plan. Pixel and dither finishes export only on Pro. Download URLs are valid for 24 hours. Prompts and briefs are sent to the hosted service.

Installation

In SourceWeft

  1. Open Gradients Studio in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/studio.gradients%2Fmcp/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "gradients-studio": {
      "type": "http",
      "url": "https://www.gradients.studio/mcp"
    }
  }
}

README

[Gradients Studio MCP]

Gradients Studio MCP

Gradient backgrounds for coding agents. Describe the background in plain words ("dark, grainy, a bit like Linear") and your agent previews it, adjusts it, and drops the finished file into your repo at the exact size the layout needs: a website hero, an OG image, a launch post, a slide.

[Gradients Studio MCP]

  • Server: https://www.gradients.studio/mcp (remote, Streamable HTTP, stateless)
  • No key to start: previews, palettes and suggestions work without an account.
  • Exports: exact-size files with a download URL need a free API key; 5 free a month, unlimited on Pro.
  • Docs: https://www.gradients.studio/mcp · agent install guide: llms-install.md

This repository holds the server's public listing files and docs only. The service itself is hosted; there is nothing to build or run.

Install

Claude Code

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

Or as a plugin, which adds a skill that tells Claude when to reach for it:

bash
/plugin marketplace add anusandhan/gradients-studio-mcp/plugin install gradients-studio@gradients-studio

Cursor: Add to Cursor, or add to ~/.cursor/mcp.json:

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

Codex

bash
codex mcp add gradients --url https://www.gradients.studio/mcp

VS Code

bash
code --add-mcp '{"name":"gradients","type":"http","url":"https://www.gradients.studio/mcp"}'

Gemini CLI

bash
gemini extensions install https://github.com/anusandhan/gradients-studio-mcp

Windsurf, Cline, Claude Desktop and others: add a remote server named gradients with the URL above. Per-client details are in llms-install.md.

Add a key for exports

  1. Create a key at https://www.gradients.studio/app?keys=1 (sign in, then account menu → API keys). It is shown once.
  2. Send it as Authorization: Bearer <key>:
bash
claude mcp remove gradientsclaude mcp add gradients --transport http https://www.gradients.studio/mcp --header "Authorization: Bearer <key>"

In JSON configs, add "headers": { "Authorization": "Bearer <key>" } next to "url". With the Claude Code plugin, set GRADIENTS_STUDIO_KEY in your environment instead.

Tools

ToolWhat it doesKey
suggest_settingsTurns a brief ("dark, premium fintech hero, a bit retro") into two or three starting settings. Understands jobs, moods, colors, product names, styles and finishes.No
list_palettesThe studio's sixteen palettes, palettes behind sites people admire (Linear, Stripe, Raycast…), and six tuned starting points for common jobs. Your saved palettes too, with a key.No
render_gradientRenders with every dial the studio has: blobs, stripes, clouds or rays; grain; pixel and dither finishes; shape overlays or your logo SVG. Without size: a free 960px preview inline. With size: an exact-size export and a download URL valid for 24 hours.Only for size

Every result includes the settings (send them back to iterate) and a studio link to take over in the browser. Asking for the same export again within 24 hours returns the same URL and costs nothing.

Example prompts

  • "Add a dark, grainy hero background to the landing page, 2560×1440, something like Linear."
  • "Make a 1200×630 OG image background in our brand colors from tailwind.config.ts."
  • "Give the pricing section a soft pastel gradient background; preview three options first."
  • "Make a LinkedIn launch post background, 1080×1350, with our logo as a subtle outline."
  • "Generate a retro pixel-finish wallpaper for the 404 page."

What it makes

Website heroLaunch postDeck slide
[Website hero][Launch post][Deck slide]

Limits

  • Without a key: 30 calls a minute and 300 a day per address.
  • With a key: previews are free; sized exports use the account's monthly pool (5 free, unlimited on Pro), with a cap of 200 sized exports a day on every plan.
  • Pixel and dither finishes preview free and export on Pro.

Files in this repo

  • server.json: the MCP Registry entry
  • .claude-plugin/, .mcp.json, skills/: the Claude Code plugin and its marketplace
  • .codex-plugin/: the Codex plugin
  • gemini-extension.json, GEMINI.md: the Gemini CLI extension
  • glama.json: the Glama listing
  • llms-install.md: install instructions written for agents

Support

[email protected] · Privacy · Terms

The files in this repository are MIT licensed; see LICENSE.

Source: README.md at commit 0357a0d

Tools

3

render_gradient

Render a gradient background

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.

Parametersblurseedsizegrainsheenstylecolorsrequireddetaileffectformatoverlaycontrast+23 more

list_palettes

List palettes and starting points

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.

Takes no parameters.

suggest_settings

Suggest settings from a brief

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.

ParametersbriefrequiredaspectRatio

Version history

2
  1. v1.1.0LatestOct 19, 2026
  2. v1.0.1Sep 21, 2026

Score

90% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts

    Declare a license in the repository or the registry entry.