Skip to content
UI Kit
Accent color

3D WebGL backgrounds

Living WebGL backdrops with depth, from flowing light and particle fields to dot spheres, wave fields, light rays and a breathing orb. Each one with a still picture as fallback.

6 components · 24 variants
Switch category

Light and depth behind your copy

A living background gives a hero or a closing panel depth without a single picture to load. The six backgrounds here are drawn live with WebGL in the accent color of your theme, each one has a still picture as fallback and rests as a single still frame when people ask for reduced motion.

Shader gradient lets soft light flow in the accent and its neighbours. Particle field fills the depth with glowing particles and a little pointer parallax. Dot sphere turns a globe of evenly spaced dots with accent sparks and a halo. Wave field glides a surface of lines or dots toward the viewer. Light rays falls in shafts from above with haze and floating dust, and Glow orb breathes as a soft sphere of light. Every one comes as a hero, a band for figures, a featured card and a backdrop behind a call to action.

Use one living background per page, in the hero or at the close, and keep the rest of the page calm. The scrim under the copy keeps text readable, so headlines stay sharp on every frame. Pick by mood, the gradient and the orb feel calm, particles and waves feel technical, the rays feel like a stage.

On this page

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

dot-sphere

Dot sphere

A turning sphere of evenly spaced dots, ray traced with WebGL. Lit front, faint back, a few dots glowing in the accent and a halo around it. Tilts with the pointer.

Props and details · Dot sphere

Hero with sphere besideNew in 1.2

Copy on the left, the sphere turns on the right. On phones it rests below the copy.

HorizonNew in 1.2

A large sphere rises from the bottom edge like a planet, the copy stands above it.

Featured cardNew in 1.2

A sphere peeks into the top corner of the feature card.

Behind a call to actionNew in 1.2

A big, quiet sphere frames the closing panel, its rim glows around the copy.

glow-orb

Glow orb

A soft, breathing orb of light, shaded like a sphere with a swirl inside and a wide glow, drawn with WebGL. Leans toward the pointer.

Props and details · Glow orb

Hero with orb besideNew in 1.2

Copy on the left, the orb breathes on the right. On phones it rests below the copy.

Rising orbNew in 1.2

The orb rises half above the bottom edge like a sun, the copy stands above.

Featured cardNew in 1.2

A small orb glows in the feature card, like a voice that is listening.

Behind a call to actionNew in 1.2

A large orb glows softly behind the closing headline.

light-rays

Light rays

Shafts of light falling from above with haze and floating dust, drawn with WebGL. They shimmer without repeating, the source follows the pointer a little.

Props and details · Light rays

Hero from aboveNew in 1.2

Light falls straight onto a centered headline, like through a skylight.

Morning bandNew in 1.2

Light slants in from the upper right across a band of figures.

Spotlight cardNew in 1.2

A narrow beam lights the one card that matters most.

Behind a call to actionNew in 1.2

A wide, slow fan of light opens over the closing panel.

particle-field

Particle field

Glowing particles in up to six depth layers, drawn with WebGL. Near ones large and soft, far ones fine, the pointer spreads the layers and lights its surroundings.

Props and details · Particle field

Hero in depthNew in 1.2

A deep field of rising particles behind a centered headline.

Drifting bandNew in 1.2

Particles drift sideways through a full width band of figures.

Featured cardNew in 1.2

A dense, fine field inside one card of a grid.

Slow drift behind a call to actionNew in 1.2

Large, slow particles falling softly around the closing panel.

shader-gradient

Shader gradient

Flowing light in the accent color and its neighbours, drawn live with WebGL. Folds like silk, follows the pointer and the scroll, with a still picture as fallback.

Props and details · Shader gradient

Hero backgroundNew in 1.2

A full hero panel with soft light behind a centered headline.

Section bandNew in 1.2

A full width band with figures, the light pools on the right.

Featured cardNew in 1.2

The light lives in one card of a grid and marks the feature that matters most.

Behind a call to actionNew in 1.2

Strong, slower light that fills the closing panel of a page.

wave-field

Wave field

A wavy surface in perspective, drawn as lines or dots with WebGL. Glides toward the viewer, crests catch the accent, the pointer raises the waves under it.

Props and details · Wave field

Hero above the wavesNew in 1.2

The copy stands above a field of lines that glides toward the viewer.

Dotted bandNew in 1.2

A low field of dots under a full width band of figures.

Featured cardNew in 1.2

Tall waves fill the feature card like a sound wave.

Behind a call to actionNew in 1.2

A calm sea of dots reaches up to the middle of the closing panel.

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to 3D backgrounds on a page.

Often searched

Jump to

Copied to the clipboard