Gradient backdrop
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.
From the noodle
Change the noodle above and the wash changes with it.
Quarterly review
The wash is mixed from this noodle’s primary, accent, info and success colours at 24%, so the text keeps its contrast.
<div class="mn-gradient mn-grain" style="padding:2.5rem 1.5rem;border-radius:var(--mn-radius-box);border:1px solid var(--mn-border)">
<h3 class="mn-h3" style="margin:0 0 .4rem">Quarterly review</h3><p class="mn-muted" style="margin:0;max-width:30rem">The wash is mixed from this noodle’s primary, accent, info and success colours at 24%, so the text keeps its contrast.</p>
</div>Named palettes
<div class="mn-grid" style="--mn-min:9rem">
<figure style="margin:0"><div class="mn-gradient mn-gradient-vivid mn-gradient-aurora mn-grain" style="aspect-ratio:4/3;border-radius:var(--mn-radius-box)" role="img" aria-label="aurora gradient"></div><figcaption class="mn-caption">mn-gradient-aurora</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-vivid mn-gradient-dawn mn-grain" style="aspect-ratio:4/3;border-radius:var(--mn-radius-box)" role="img" aria-label="dawn gradient"></div><figcaption class="mn-caption">mn-gradient-dawn</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-vivid mn-gradient-tide mn-grain" style="aspect-ratio:4/3;border-radius:var(--mn-radius-box)" role="img" aria-label="tide gradient"></div><figcaption class="mn-caption">mn-gradient-tide</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-vivid mn-gradient-ember mn-grain" style="aspect-ratio:4/3;border-radius:var(--mn-radius-box)" role="img" aria-label="ember gradient"></div><figcaption class="mn-caption">mn-gradient-ember</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-vivid mn-gradient-moss mn-grain" style="aspect-ratio:4/3;border-radius:var(--mn-radius-box)" role="img" aria-label="moss gradient"></div><figcaption class="mn-caption">mn-gradient-moss</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-vivid mn-gradient-dusk mn-grain" style="aspect-ratio:4/3;border-radius:var(--mn-radius-box)" role="img" aria-label="dusk gradient"></div><figcaption class="mn-caption">mn-gradient-dusk</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-vivid mn-gradient-steel mn-grain" style="aspect-ratio:4/3;border-radius:var(--mn-radius-box)" role="img" aria-label="steel gradient"></div><figcaption class="mn-caption">mn-gradient-steel</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-vivid mn-gradient-sand mn-grain" style="aspect-ratio:4/3;border-radius:var(--mn-radius-box)" role="img" aria-label="sand gradient"></div><figcaption class="mn-caption">mn-gradient-sand</figcaption></figure>
</div>Flowing
Blurred shapes that move slowly. Use one per page, behind a short statement.
<div class="mn-grid" style="--mn-min:14rem">
<figure style="margin:0"><div class="mn-gradient mn-gradient-flow mn-gradient-halo mn-grain" style="aspect-ratio:16/10;border-radius:var(--mn-radius-box)" role="img" aria-label="halo flowing gradient"></div><figcaption class="mn-caption">mn-gradient-flow mn-gradient-halo</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-flow mn-gradient-lagoon mn-grain" style="aspect-ratio:16/10;border-radius:var(--mn-radius-box)" role="img" aria-label="lagoon flowing gradient"></div><figcaption class="mn-caption">mn-gradient-flow mn-gradient-lagoon</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-flow mn-gradient-citrus mn-grain" style="aspect-ratio:16/10;border-radius:var(--mn-radius-box)" role="img" aria-label="citrus flowing gradient"></div><figcaption class="mn-caption">mn-gradient-flow mn-gradient-citrus</figcaption></figure>
<figure style="margin:0"><div class="mn-gradient mn-gradient-flow mn-gradient-nightfall mn-grain" style="aspect-ratio:16/10;border-radius:var(--mn-radius-box)" role="img" aria-label="nightfall flowing gradient"></div><figcaption class="mn-caption">mn-gradient-flow mn-gradient-nightfall</figcaption></figure>
</div>Drifting, behind a card
Text sits on a surface
At full strength the backdrop is artwork. Put words on an opaque surface.
<div class="mn-gradient mn-gradient-vivid mn-gradient-tide mn-gradient-animate mn-grain" style="display:grid;place-items:center;padding:3rem 1.5rem;border-radius:var(--mn-radius-box)">
<div class="mn-card" style="max-width:22rem;background:var(--mn-surface)"><div class="mn-card-body"><h3 class="mn-card-title">Text sits on a surface</h3><p class="mn-card-description">At full strength the backdrop is artwork. Put words on an opaque surface.</p></div></div>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/gradient.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.