A good background is like a film’s score: you feel it without noticing it. A section with a subtle live background looks more expensive and modern, without a single extra word.

And like the whole series (text, images, buttons) - here too it is all CSS, with no plugin, on a fast page. Play with the speed, and if a background fits you, one click and we know.

All effects respect the prefers-reduced-motion setting.

Background & section effects

Moving Gradientanim-gradient

LoopA hero or CTA background - color that flows

SpeedFastSlow
Your Section
Want this? →
Show code
.panel { background: linear-gradient(120deg,
    #3BD9FF, #8B5CF6, #0A0B17, #3BD9FF); background-size: 300% 300%;
  animation: grad var(--dur,10s) ease infinite; }
@keyframes grad { 0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%} }

Floating Blobsblobs

LoopA soft, modern background with depth

SpeedFastSlow
Live Background
Want this? →
Show code
.panel::before, .panel::after { content:''; position:absolute;
  width:55%; aspect-ratio:1; border-radius:50%; filter: blur(45px); }
.panel::before { background:#3BD9FF; animation: b1 var(--dur,16s) infinite; }
.panel::after  { background:#8B5CF6; animation: b2 var(--dur,16s) infinite; }

Graingrain

LoopA cinematic texture - a subtle premium feel

SpeedFastSlow
Cinematic Texture
Want this? →
Show code
.panel::after { content:''; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,...feTurbulence...");
  opacity:.35; animation: grain var(--dur,.5s) steps(3) infinite; }

Dot Griddot-grid

LoopA clean, minimal, technical background

SpeedFastSlow
Technical Background
Want this? →
Show code
.panel { background-image: radial-gradient(
    rgba(59,217,255,.45) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  animation: dots var(--dur,8s) linear infinite; }
@keyframes dots { to { background-position: 22px 22px; } }

Auroraaurora

LoopA dramatic, glowing background for a standout section

SpeedFastSlow
Soft Lights
Want this? →
Show code
.panel::before { content:''; position:absolute; inset:-50%;
  background: conic-gradient(from 0deg, transparent, #3BD9FF,
    transparent, #8B5CF6, transparent); filter: blur(60px); opacity:.55;
  animation: aur var(--dur,12s) linear infinite; }
@keyframes aur { to { transform: rotate(360deg); } }

Onward

This is the fourth category in the menu. There are already effects for text, images and buttons, and soon the last category: numbers and data.

Want a few of these on your site? They are part of the build with us - let’s talk.