Gradient Generator

Build CSS gradients with live preview. No data leaves your browser.

Colors

Direction

Preview

CSS Code

Use this tool from AI agents

This tool's engine is available to AI agents over MCP as css_gradient. Add the Clean.tools server, then your agent can call it directly.

Claude Code

claude mcp add --transport http clean-tools https://mcp.clean.tools/mcp

Claude Desktop (mcpServers)

{"mcpServers":{"clean-tools":{"command":"npx","args":["-y","@clean-tools/mcp"]}}}

Cursor

https://mcp.clean.tools/mcp

Or call it over plain HTTP from any script. Same engine, JSON in and JSON out, no key:

curl

curl -s https://api.clean.tools/v1/css_gradient \
  -H 'content-type: application/json' \
  -d '{"type":"linear","direction":"135deg","colors":["#f97316","#ec4899","#8b5cf6"]}'

JavaScript

const res = await fetch("https://api.clean.tools/v1/css_gradient", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({"type":"linear","direction":"135deg","colors":["#f97316","#ec4899","#8b5cf6"]})
});
const data = await res.json();

OpenAPI spec npm: @clean-tools/mcp Full developer guide

How it works

This gradient generator builds CSS linear-gradient and radial-gradient values from your chosen color stops and direction. Add up to 5 stops, pick a direction or angle, and see the result instantly in the live preview. The generated CSS is ready to paste into your stylesheet.

Everything runs entirely in your browser. No data is sent to a server. Works on any modern browser, on both mobile and desktop. If you would rather build gradients from a script or an AI agent, the same engine is available through the Clean.tools API as css_gradient, or you can install the @clean-tools/mcp package from npm.

Frequently asked questions

Can I set custom stop positions or percentages?

Color stops are spaced evenly across the gradient, so with three stops the middle color lands at 50 percent. To weight a color differently, edit the generated CSS by hand and add a percentage after a color, such as #8b5cf6 20%.

Why does the hex field only accept 6-digit colors?

The text input validates full 6-digit hex values like #3b82f6 and ignores 3-digit shorthand or named colors while you type. It also does not carry an alpha channel, so for transparency you can swap a stop for an rgba() value in the copied CSS.

What does the radial direction produce?

Selecting Radial outputs radial-gradient(circle, ...), which blends outward from the center rather than along a line. All other options build a linear-gradient() using either a keyword like to right or an angle such as 45deg.

Does the Copy link button send my gradient anywhere?

No. Your colors and direction are encoded directly into the page URL in your browser, and the link only recreates the same gradient when opened. Nothing is uploaded or stored on a server.

Can I use this from the command line or an AI agent?

Yes. Post your gradient options to the REST endpoint at https://api.clean.tools/v1/css_gradient and it returns the CSS as JSON. The same engine also runs as an MCP server you can add to Claude, Claude Code, or Cursor, so an agent can generate gradients for you. To run it locally, install the @clean-tools/mcp package from npm, which starts it as a local stdio server.

More tools from Clean.tools

View all tools

Use Clean.tools from your AI agent

This tool is also css_gradient on the Clean.tools MCP server — the same engine, callable by your AI agent directly. No key, no signup: requests are processed in memory and request contents are never stored.

Claude Code

claude mcp add --scope user --transport http clean-tools https://mcp.clean.tools/mcp

Any MCP client (streamable HTTP, authless)

https://mcp.clean.tools/mcp

Every tool, the REST API, and setup for Cursor, Claude Desktop, VS Code & more →