{
"$schema": "https://mian.ro/schema/v2/registry.json",
"schemaVersion": "2.0.0",
"generatedAt": "2026-10-02T13:14:06.957Z",
"id": "gradient",
"name": "Gradient backdrop",
"category": "Layout & utilities",
"description": "Soft mesh gradients for a band, a hero or a media frame. By default they are mixed from the noodle’s own colours, so they follow the noodle and the mode; eight named palettes are there when you want a fixed mood.",
"tags": [
"gradient",
"mesh gradient",
"background",
"backdrop",
"aurora",
"hero background",
"grain",
"noise texture",
"colour wash"
],
"requiresJs": false,
"license": "LicenseRef-MIAN-1.0",
"composition": {
"role": null,
"intents": [
"gradient background",
"mesh gradient",
"hero backdrop",
"colour wash",
"grain texture",
"aurora background"
],
"prominence": null,
"density": null,
"worksAfter": [],
"worksBefore": [],
"alternatives": [
"media"
],
"avoid": "Never a purple-to-blue wash behind a centred headline, and never gradient-filled text. One gradient per page, as a backdrop or a media frame."
},
"url": "https://mian.ro/components/gradient",
"markdownUrl": "https://mian.ro/ai/components/gradient.md",
"classes": [
{
"name": "mn-gradient",
"description": "A four-point mesh from the noodle’s primary, accent, info and success colours, at a strength that keeps text readable."
},
{
"name": "mn-gradient-aurora · -dawn · -tide · -ember · -moss · -dusk · -steel · -sand",
"description": "Named palettes."
},
{
"name": "mn-gradient-vivid",
"description": "Full strength. For artwork and media frames, not behind body text."
},
{
"name": "mn-gradient-linear · mn-gradient-conic",
"description": "A two-colour sweep or a conic sweep instead of a mesh. --g-angle sets the direction."
},
{
"name": "mn-gradient-animate",
"description": "A slow drift (26 s). Stops under reduced motion."
},
{
"name": "mn-gradient-flow",
"description": "Soft blurred shapes that turn and breathe slowly, like light through liquid. Add mn-gradient-still to freeze it. Stops under reduced motion."
},
{
"name": "mn-gradient-halo · -lagoon · -citrus · -nightfall",
"description": "Three- and four-colour palettes made for the flowing variant."
},
{
"name": "mn-gridlines",
"description": "A fine grid of lines as a backdrop; --grid sets the cell size."
},
{
"name": "mn-grain",
"description": "A fine film grain over the element, which breaks up banding."
},
{
"name": "--g1 … --g4 · --g-mix",
"description": "Your own four colours and the strength (default 24%)."
}
],
"accessibility": [
"Text on the default strength keeps the noodle’s contrast; with mn-gradient-vivid put text on a surface (a card) or check the pair yourself.",
"A gradient is decoration: never let it carry meaning.",
"The drift is slow and stops under prefers-reduced-motion."
],
"examples": [
{
"title": "From the noodle",
"description": "Change the noodle above and the wash changes with it.",
"html": "
\n
Quarterly review
The wash is mixed from this noodle’s primary, accent, info and success colours at 24%, so the text keeps its contrast.