By · Updated

Bokeh Background

Slow-Drifting Soft Circles Behind Your Content, Pure CSS Animation

No ratings yet

4 Bokeh Background presets to start from

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the Bokeh Background works

This bokeh background generator scatters soft, out-of-focus circles of light across a section and lets them drift gently, like city lights through a camera lens. Choose the colours, the number of lights and how blurred they are, then copy the HTML and CSS.

Bokeh works well behind festive banners, event pages and moody hero sections, where a photograph would be heavy and a flat colour would feel empty.

How the bokeh background is built

Each light is an empty <span> with border-radius: 50%, a colour from your list and a CSS blur filter. Positions, sizes and delays come from a fixed seed, so the arrangement is the same every time. One keyframe moves and scales each light a little and plays back and forth, so they never jump.

Choosing colours

Warm golds and pinks on a near-black background look like evening street lights. Blues and violets feel calmer. The lights are 55 percent opaque, so overlapping circles mix naturally where they meet.

FAQ

Is a blurred CSS bokeh slow on phones?

Blur filters are one of the more expensive effects, so keep the light count and blur moderate. Fourteen lights at 14 pixels of blur runs smoothly on most phones; very large blurs on dozens of lights may stutter.

Can I put the bokeh behind an image?

Yes. Place the image inside the section before the lights and lower the light opacity a little. The lights then glow over the photo while the heading stays on top.

Does the bokeh move for visitors who prefer less motion?

No. The copied CSS includes a prefers-reduced-motion rule that stops the drift, so those visitors see the same soft lights standing still behind the content.

See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.

Related tools

Aurora Background

Make a soft northern lights glow that drifts behind a section.

Bubble Background

Add see-through bubbles that wobble as they rise.

Floating Shapes

Add slowly rising, spinning shapes behind a hero section.

Mesh Gradient Generator

Pure-CSS mesh gradients from stacked radial layers.

Starfield Background

Make stars stream past as if flying through space.