CSS Gradient Generator
Design a CSS gradient with a live preview and copy-ready code.
About
Generate a CSS gradient. Inputs: `from`, `to` (hex colors), optional `angle` (degrees) and `kind` ("linear" | "radial"). Returns the `background` CSS. Use when a user wants a gradient/background.
Parameters
| Name | Type | Description |
|---|---|---|
from | string | Start color (hex). (default: "#6366f1") |
to | string | End color (hex). (default: "#22d3ee") |
angle | number | Angle in degrees (linear only). (default: 135) |
kind | linear | radial | (default: "linear") |
locale | en | zh | (default: "en") |
Examples
- Make an indigo-to-cyan gradient at 135°.
Use it
In the browser: https://mcp.gholl.com/embed/gradient-generator
As an AI tool: call gradient-generator on the MCP endpoint https://mcp.gholl.com/mcp.
{
"mcpServers": {
"gholl": {
"type": "http",
"url": "https://mcp.gholl.com/mcp"
}
}
}
Related tools
- Color Studio & Contrast — Convert between hex/RGB/HSL, generate tints and shades, and check WCAG contrast against black and white.
- CSS Box Shadow — Build a CSS box-shadow with a live preview.
- CSS Border Radius — Shape CSS corners with a live preview.
- Color Palette — Generate a harmonious palette from a base color.
- Color Blindness Simulator — Preview a color under different color-vision deficiencies.
- QR Code Generator — Generate a QR code from text or a URL.
- Image to Base64 — Convert an image to a data URI / Base64.
- Image Compressor — Compress an image in the browser.
- Favicon Generator — Turn text or an emoji into a favicon.