# Skill: Build a living background with radial glows, mesh gradients, grain, and subtle motion

> Master this to add depth and atmosphere to a page background using layered CSS techniques; apply whenever a flat background looks forgotten or needs to set a mood without competing with content.

Source: sodigi*learn -- inspiration/zhivye-fony * https://sodigi.io/learn/inspiration/zhivye-fony

## When to use

- A hero block, landing page header, or full-screen section feels flat and forgettable.
- The page needs mood-setting atmosphere before the first line of text is read.
- A gradient looks "plastic" or shows visible color banding.
- Animating a background subtly to add a sense of life without distracting from content.

## Core rules

- The background is set dressing, not the actor. The moment it pulls attention to itself, it has failed.
- Never use pure black (#000000) or pure white (#FFFFFF) as the base. A slightly warm or cool dark shade reads as expensive.
- Use one or two radial glow sources maximum. Three or more almost always create visual noise.
- Feather radial glows heavily: the source should sit in or beyond a corner, so only the soft "tail" shows on screen.
- Mesh gradient sweet spot: four to six blobs of two or three related colors plus one accent. Not a rainbow.
- Motion must be very slow: tens of seconds per cycle. A cycle of a few seconds is distracting and annoying.
- Grain should be felt, not seen. If you notice it at first glance, reduce it dramatically.
- Always provide a static fallback when the OS `prefers-reduced-motion` setting is active.
- The golden rule: the background always loses to text on contrast. Text must remain clearly readable.

## Procedure

1. Choose a warm or cool dark base color (petrol, deep blue, graphite -- not #000000).
2. Add one soft radial glow in the top corner using an accent palette color. Feather it so it fully dissolves into the base by the opposite edge.
3. (Optional) Add a second radial glow in the bottom corner, different shade and weaker than the first.
4. (Optional) Stack four to six additional blobs of related colors to build a mesh gradient for large hero areas.
5. Overlay a barely visible grain/noise layer to remove the plastic look and mask banding. Dial back until the grain cannot be spotted at first glance.
6. (Optional) Animate the glow with a very slow drift: 20-60 second cycle, subtle position shift.
7. Write a static version for reduced-motion users.
8. Squint test: blur your eyes and check that text stays clearly readable and the background recedes. If background and text fight, reduce glow brightness, blob count, or grain opacity.

## Ready-to-use prompt

```
Make a living background for a dark page:
- Base: not pure black -- use a warm dark shade (petrol, graphite, or deep blue around #0D1117 to #1A1F2E).
- Over it: one soft radial glow from the top-left corner, in [your accent color], heavily feathered -- fully dissolved into the base by the opposite edge.
- Optional second glow: bottom-right corner, a different related shade, weaker than the first.
- Mesh: if the screen is large and empty (hero block), layer 4-6 colored blobs using related shades plus one accent. No rainbow colors.
- Grain: a barely visible noise overlay, opacity low enough that it is felt but not seen at first glance. Goal: remove the plastic look and hide any color banding.
- Motion: the glow drifts very slowly, 30-50 second cycle. Mandatory static version when prefers-reduced-motion is active.
- The background must stay quieter than the text at all times. Letters must remain contrasty and readable.
```

## Pitfalls

- Pure black or pure white base: flat, cheap, leaves no room for shadows or glow to read.
- A glow that looks like a spotlight: too bright and sharp. Feather much harder and move the source outside the visible area.
- Rainbow colors in the mesh: five contrasting hues create mud at the seams. Use related shades.
- Too many blobs: causes lag on weaker devices and visual noise instead of atmosphere.
- Fast background animation (a few seconds per cycle): distracts from reading and pulls attention away from content.
- Ignoring `prefers-reduced-motion`: for some users animated backgrounds cause physical discomfort.
- Grain cranked too high: visible noise at first glance means it is many times stronger than needed.
- Living background under long article text: motion and color transitions under reading content tire the eye. Reserve them for hero blocks.