Skip to content
UI Kit
Accent color

Animated backgrounds for sections

Aurora, gradient mesh, noise, glowing dots, fading grids and a spotlight that follows the pointer.

6 components · 19 variants
Switch category

Light and texture behind the content

A background sets the mood of a section without asking for attention. The six components here sit behind your content, take the accent color of the kit and stay quiet in light mode and luminous in dark mode, with motion that stops when reduced motion is on.

Gradient mesh and Aurora give a hero soft color, still or drifting slowly. Noise adds grain that takes the plastic edge off gradients. Dot glow lights up dots near the pointer or in a wave, Grid fade draws a line or tile grid that fades to the edges. Spotlight follow moves a light with the pointer and rests in the middle on touch screens.

Keep text contrast first, test your headline over the brightest part of the background. Use one moving background per page. All of them are CSS and SVG, light enough for every connection, but particles and canvases belong in the hero, not behind every section.

On this page

Every component of this category. Pick one to jump to its variants.

gradient-mesh

Gradient mesh

Layered radial gradients in accent tones, still or drifting slowly.

Props and details · Gradient mesh

Soft cloud

A pale cloud of tones behind the middle, calm enough for health and care.

Vivid

Overlapping tones fill the stage and drift, the hue turns slightly.

Corners

Light in two opposite corners, the copy stays on a clear middle. Still.

Horizon

The tones rise from the bottom edge like an early sky.

aurora

Aurora

Soft veils of light in the accent color that drift slowly. Quiet in light mode, luminous in dark mode.

Props and details · Aurora

Soft from the top

A gentle light hangs from the top edge, made for announcements.

Vivid in the middle

Stronger veils behind the headline for a product teaser.

Horizon

The light rises from the bottom edge like a morning sky.

dot-glow

Dot glow

A dot field whose dots light up in the accent color near the pointer or in a moving wave.

Props and details · Dot glow

Follows the pointer

Dots near the pointer glow. Without a pointer the light wanders slowly on its own.

Wave

A diagonal band of light sweeps across the field and runs on with the scroll.

Ripple

Calm rings spread from the middle, like breathing.

grid-fade

Grid fade

A line or tile grid that fades out, with cells that light up in the accent color.

Props and details · Grid fade

Lines with pulse

Hairlines through the middle settle into place as the stage scrolls up, a few cells pulse slowly.

Tiles

Rounded tiles with small gaps, highlighted ones in the accent.

Dashed from the top

A quiet dashed grid like drafting paper that fades downward.

noise

Noise

A grain overlay from an SVG turbulence that takes the plastic edge off gradients and accent surfaces.

Props and details · Noise

Soft grain

Fine grain over a gradient mesh, like paper under light.

Film grain

Coarser grain that flickers like film. Stands still with reduced motion.

On an accent card

Grain in the contrast color on a solid accent surface, with a soft blend.

spotlight-follow

Spotlight follow

A stage whose light follows the pointer and rests in the middle on touch screens.

Props and details · Spotlight follow

Soft light

Plain light without a pattern, calm enough for a law firm.

Grid reveal

The light uncovers a grid in the accent color.

Dot reveal

A wider light over a dot field, resting a little higher.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Backgrounds on a page.

Often searched

Jump to

Copied to the clipboard