CSS Gradient Generator API

Build a CSS linear, radial or conic gradient (optionally repeating) from colour stops. Colours are validated and written as hex.

POST /api/v1/tools/css-gradient-generatorMCP css_gradient_generatorDesign & Colour

Create linear, radial and conic CSS gradients with multiple colour stops, angles and positions. Preview live and copy clean, standards-compliant CSS.

Input

Send these as a JSON object. Unknown fields are rejected.

stops: Colour stops, one per line or comma-separated, each "colour position%", e.g. "#0ea5e9 0%, #8b5cf6 100%". Colours are hex, rgb(), hsl() or hsv() (no colour names). Positions are 0 to 100; if every position is left out the stops are spread evenly. 2 to 10 stops. (string, required)
type: Gradient type. (string, one of linear, radial, conic, default "linear")
angle: linear: direction in degrees (90 = left to right). conic: starting angle. (number, -360 to 360, default 90)
shape: radial: circle or ellipse. (string, one of circle, ellipse, default "circle")
centerX: radial and conic: centre X in %. (number, 0 to 100, default 50)
centerY: radial and conic: centre Y in %. (number, 0 to 100, default 50)
repeating: Use repeating-*-gradient(). (boolean, default false)

Try it in the browser JSON Schema Get an API key

curl https://pithlab.com/api/v1/tools/css-gradient-generator \n  -H "Authorization: Bearer $PITHLAB_KEY" \n  -H "Content-Type: application/json" \n  -d '{"stops":"#0ea5e9 0%, #8b5cf6 100%","type":"linear","angle":135}'

Example response

{
  "ok": true,
  "result": {
    "value": "linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%)",
    "css": "background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);"
  }
}