# Gradient backdrop · MIAN 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. - Id: `gradient` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/gradient - Use for: gradient background, mesh gradient, hero backdrop, colour wash, grain texture, aurora background. - 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. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-gradient`: A four-point mesh from the noodle’s primary, accent, info and success colours, at a strength that keeps text readable. - `mn-gradient-aurora · -dawn · -tide · -ember · -moss · -dusk · -steel · -sand`: Named palettes. - `mn-gradient-vivid`: Full strength. For artwork and media frames, not behind body text. - `mn-gradient-linear · mn-gradient-conic`: A two-colour sweep or a conic sweep instead of a mesh. --g-angle sets the direction. - `mn-gradient-animate`: A slow drift (26 s). Stops under reduced motion. - `mn-gradient-flow`: Soft blurred shapes that turn and breathe slowly, like light through liquid. Add mn-gradient-still to freeze it. Stops under reduced motion. - `mn-gradient-halo · -lagoon · -citrus · -nightfall`: Three- and four-colour palettes made for the flowing variant. - `mn-gridlines`: A fine grid of lines as a backdrop; --grid sets the cell size. - `mn-grain`: A fine film grain over the element, which breaks up banding. - `--g1 … --g4 · --g-mix`: 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 ### From the noodle Change the noodle above and the wash changes with it. ```html

Quarterly review

The wash is mixed from this noodle’s primary, accent, info and success colours at 24%, so the text keeps its contrast.

``` ### Named palettes ```html
mn-gradient-aurora
mn-gradient-dawn
mn-gradient-tide
mn-gradient-ember
mn-gradient-moss
mn-gradient-dusk
mn-gradient-steel
mn-gradient-sand
``` ### Flowing Blurred shapes that move slowly. Use one per page, behind a short statement. ```html
mn-gradient-flow mn-gradient-halo
mn-gradient-flow mn-gradient-lagoon
mn-gradient-flow mn-gradient-citrus
mn-gradient-flow mn-gradient-nightfall
``` ### Drifting, behind a card ```html

Text sits on a surface

At full strength the backdrop is artwork. Put words on an opaque surface.

``` ## Source Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/gradient/source