Home / Snippets / Color & Theming /
Video-like CSS background
Layer gradients + subtle noise, then drift the background positions slowly. It feels “alive” like a video—without downloading a video.
Quick implementation
@keyframes drift {
0% { background-position: 0% 10%, 100% 90%, 40% 60%; }
50% { background-position: 60% 20%, 30% 70%, 70% 30%; }
100% { background-position: 0% 10%, 100% 90%, 40% 60%; }
}
.ambient-bg {
background:
radial-gradient(120% 90% at 15% 30% in oklch, oklch(0.42 0.18 265 / 0.45), transparent 60%),
radial-gradient(110% 120% at 85% 75% in oklch, oklch(0.42 0.18 300 / 0.35), transparent 55%),
conic-gradient(from 190deg at 55% 45% in oklch,
oklch(0.22 0.10 260 / 0.55),
oklch(0.30 0.14 300 / 0.55),
oklch(0.26 0.12 230 / 0.55),
oklch(0.22 0.10 260 / 0.55)
);
background-size: 220% 220%, 240% 240%, 260% 260%;
animation: drift 14s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.ambient-bg { animation: none; }
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer designing an ambient, video-like background using pure CSS.
Goal: Create a background that feels like subtle moving footage (slow drift, depth, texture) without using images or video.
Technical constraints:
- Use layered gradients: at least two radial gradients + one conic or linear gradient.
- Use oklch() colors throughout; include "in oklch" where applicable.
- Animate only background-position (and optionally opacity) with a slow duration (10–20s).
- Add a subtle noise/dot texture layer using a repeating radial gradient overlay.
- Respect prefers-reduced-motion: reduce by disabling motion and lowering texture intensity.
- Keep lightness values low enough for dark mode (roughly 0.10–0.45).
Framework variant (pick one):
A) A reusable CSS class .ambient-bg that can be applied to any container.
B) A React component that renders a div and accepts intensity props (speed, chroma).
Edge cases to handle:
- Banding: add intermediate stops or overlay subtle texture.
- Contrast: keep any overlay text readable with a bottom gradient veil.
- Performance: avoid animating filter; prefer transforms/opacities and background-position only.
Return HTML + CSS.Why this matters in 2026
Video headers are heavy and fragile: they cost bytes, can stutter on low-power devices, and complicate accessibility. An ambient CSS background gives you the same “alive” feeling for hero sections, onboarding, and dashboards—without media pipelines.
The logic
The trick is parallax-by-layering: multiple gradients with different sizes and focal points create depth. Slow background-position drift moves the entire scene as one, while a faint texture overlay hides gradient banding.
Accessibility & performance
Always add a reduced-motion fallback. Background-position animations are generally cheap, but keep the number of layers reasonable and avoid animated filters. If you put text on top, add a dark veil so contrast stays stable throughout the drift.