gradient.mirio.dev

Deterministic gradient SVGs from any string. Same input always produces the same gradient.

Parameter	Default	Description
`size`	128	Square size in px (1-1024)
`w`, `h`	128	Width and height separately
`base`	auto	Base color (name or hex `#ff6600`)
`shape`	rect	`circle` for round avatars
`type`	linear	`radial` for radial gradients
`stops`	2	Number of color stops (2-5)
`texture`	none	`noise` for subtle texture overlay
`initials`	none	`true` to auto-extract, or pass value e.g. `JD`

curl

# Default gradient for any string
curl https://gradient.mirio.dev/username

# Circle avatar, 48px
curl https://gradient.mirio.dev/username?shape=circle&size=48

# Radial gradient with 3 color stops
curl https://gradient.mirio.dev/username?type=radial&stops=3

# With initials overlay
curl https://gradient.mirio.dev/jane+doe?initials=true&shape=circle

HTML

<!-- Simple avatar -->
<img src="https://gradient.mirio.dev/username" />

<!-- Circle avatar with initials -->
<img src="https://gradient.mirio.dev/jane+doe?initials=true&shape=circle" />

JavaScript

// Inline the SVG for styling control
const svg = await fetch("https://gradient.mirio.dev/username?size=64")
  .then(r => r.text());
document.getElementById("avatar").innerHTML = svg;

Colors

red, blue, green, yellow, purple, orange, pink, cyan, magenta, brown, black, white, gray, navy, teal, lime, maroon, olive, aqua, silver, gold, indigo, violet, coral