DevelopersPublic API

Build gradients programmatically with the Better Gradient API

Generate mesh gradients on-demand in SVG, PNG, WebP, or CSS. The API is designed to be deterministic, fast, and easy to integrate into your product or pipeline.

Request API key View API reference

Formats

SVG, PNG, WebP, CSS

Deterministic

Seed or email inputs

Canvas sizing

width / height / size

Rate limits

30/min public • 300/min with key

Base URL

https://better-gradient.com/api/gradient

API reference

Everything you need to integrate the gradient API into your product.

Endpoint

GET /api/gradient

Use query parameters to customize output format, size, and generation seed.

Authentication

Add your API key as a bearer token to access higher limits (300/min per key). Public traffic is limited to 30/min per IP.

Authorization: Bearer YOUR_API_KEY

Parameter

Description

Default

format

Output type: svg, png, webp, css.

svg

width

Output width in pixels.

1920

height

Output height in pixels.

1080

size

Shortcut to set both width and height.

seed

Deterministic seed for repeatable gradients.

Derive a deterministic seed from email.

count

Number of shapes (3-10).

quality

WebP quality (0-1 or 1-100).

0.95

If you pass both seed and email, the seed takes precedence. Width and height override size when both are provided.

cURL example

curl -H "Authorization: Bearer YOUR_API_KEY" \
  -o mesh.webp \
  "https://better-gradient.com/api/gradient?format=webp&width=1600&height=900&seed=hello"

Replace the seed value to generate a unique gradient.

Fetch SVG

const res = await fetch(
  "https://better-gradient.com/api/gradient?format=svg&size=1200&seed=sunrise"
);
const svg = await res.text();

The response body is the raw SVG markup.

CSS background

const css = await fetch(
  "https://better-gradient.com/api/gradient?format=css&size=1200&seed=studio"
).then((r) => r.text());
document.body.style.cssText = css;

Response types

svg → image/svg+xml
png → image/png
webp → image/webp
css → text/css

Errors return plain text with status 400 or 500. Rate limits respond with 429 and include X-RateLimit headers.

Confirmation flow

Secure confirmation ensures keys are generated only by the owner.

Request access

Submit your email to receive the confirmation link.

Confirm your email

Open the email link to generate a key tied to your address.

Receive your API key

Your key is revealed once and ready to use.

Request Access

Get your API key

You will receive a confirmation link by email to generate your key.

Build with Better Gradient

Create your first mesh gradient in the editor or integrate the API into your stack.

Open the Editor