Introduction
Animated backgrounds have become essential in modern web design. They bring dynamism and depth to your interfaces, transforming a static page into an immersive experience.
In this tutorial, we will explore 5 different techniques for creating animated backgrounds in pure CSS, without any JavaScript dependency. Each technique is accompanied by an interactive demo and the complete code.
Good to know
All these techniques use modern CSS properties supported by all current browsers. No vendor prefix is needed.
1. Animated Gradient Mesh
The gradient mesh creates a fluid colored mesh effect, very popular in contemporary designs. It uses multiple overlapping radial-gradient with animated positions.
Demo interactive
.gradient-mesh {
width: 100%;
height: 100vh;
background:
radial-gradient(at 40% 20%, #6366f1 0px, transparent 50%),
radial-gradient(at 80% 0%, #8b5cf6 0px, transparent 50%),
radial-gradient(at 0% 50%, #d946ef 0px, transparent 50%),
radial-gradient(at 80% 50%, #06b6d4 0px, transparent 50%),
radial-gradient(at 0% 100%, #6366f1 0px, transparent 50%),
radial-gradient(at 80% 100%, #8b5cf6 0px, transparent 50%),
#0a0a0f;
animation: meshMove 10s ease-in-out infinite;
}
@keyframes meshMove {
0%, 100% {
background-position:
0% 0%, 100% 0%, 0% 50%,
100% 50%, 0% 100%, 100% 100%;
}
25% {
background-position:
20% 20%, 80% 10%, 10% 60%,
90% 40%, 10% 90%, 90% 100%;
}
50% {
background-position:
40% 10%, 60% 20%, 20% 40%,
80% 60%, 20% 80%, 80% 90%;
}
75% {
background-position:
20% 20%, 80% 10%, 10% 60%,
90% 40%, 10% 90%, 90% 100%;
}
}How it works
- Multiple radial-gradient: Each gradient creates a color "spot"
- Position at X% Y%: Defines the center of each gradient
- transparent 50%: The gradient edges blend smoothly
- Animation background-position: Moves the gradient centers
2. Aurora / Northern Lights Effect
The aurora effect reproduces the northern lights with fluid and undulating movements. It uses pseudo-elements with animated elliptical gradients.
Demo interactive
.aurora-bg {
width: 100%;
height: 100vh;
background: #0a0a0f;
position: relative;
overflow: hidden;
}
.aurora-bg::before,
.aurora-bg::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
animation: aurora 15s ease-in-out infinite;
}
.aurora-bg::before {
background:
radial-gradient(ellipse 80% 50% at 50% 0%,
rgba(99, 102, 241, 0.5) 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 30% 20%,
rgba(139, 92, 246, 0.4) 0%, transparent 60%);
animation-delay: 0s;
}
.aurora-bg::after {
background:
radial-gradient(ellipse 70% 50% at 70% 10%,
rgba(6, 182, 212, 0.4) 0%, transparent 60%),
radial-gradient(ellipse 50% 30% at 50% 30%,
rgba(217, 70, 239, 0.3) 0%, transparent 50%);
animation-delay: -7.5s;
}
@keyframes aurora {
0%, 100% {
transform: translateX(0) translateY(0) rotate(0deg) scale(1);
}
25% {
transform: translateX(5%) translateY(-5%) rotate(5deg) scale(1.05);
}
50% {
transform: translateX(-5%) translateY(5%) rotate(-5deg) scale(1.1);
}
75% {
transform: translateX(3%) translateY(-3%) rotate(3deg) scale(1.05);
}
}Tips for a realistic effect
- Horizontal ellipses: Auroras are naturally stretched horizontally
- Animation offset: The two layers move offset for more fluidity
- Subtle rotation: Adds a natural undulating movement
- Variable scale: Simulates the changing intensity of auroras
3. Background with Noise/Grain
The noise effect adds a grainy texture to your backgrounds, giving them a more organic and cinematic look. Widely used in premium designs.
Demo interactive
.noise-bg {
width: 100%;
height: 100vh;
background: linear-gradient(135deg,
#1a1a2e 0%, #0a0a0f 50%, #16213e 100%);
position: relative;
}
.noise-bg::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.15;
animation: noiseAnim 0.5s steps(10) infinite;
}
/* Optional vignette */
.noise-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center,
transparent 0%, rgba(10, 10, 15, 0.8) 100%);
}
@keyframes noiseAnim {
0% { transform: translate(0, 0); }
10% { transform: translate(-1%, -1%); }
20% { transform: translate(1%, 1%); }
30% { transform: translate(-1%, 1%); }
40% { transform: translate(1%, -1%); }
50% { transform: translate(-1%, 0); }
60% { transform: translate(1%, 0); }
70% { transform: translate(0, 1%); }
80% { transform: translate(0, -1%); }
90% { transform: translate(1%, 1%); }
100% { transform: translate(0, 0); }
}Inline SVG
The noise is generated via an Inline SVG encoded as a data URI. This technique avoids an extra HTTP request and works everywhere.
4. Animated Gradient Orbs
Floating orbs create a depth effect with blurry color spheres that move slowly. Perfect for hero sections.
Demo interactive
.orbs-bg {
width: 100%;
height: 100vh;
background: #0a0a0f;
position: relative;
overflow: hidden;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.7;
animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 {
width: 300px;
height: 300px;
background: #6366f1;
top: -100px;
left: -50px;
animation-delay: 0s;
}
.orb-2 {
width: 250px;
height: 250px;
background: #8b5cf6;
top: 50%;
right: -80px;
animation-delay: -5s;
animation-duration: 25s;
}
.orb-3 {
width: 200px;
height: 200px;
background: #d946ef;
bottom: -50px;
left: 30%;
animation-delay: -10s;
animation-duration: 22s;
}
.orb-4 {
width: 180px;
height: 180px;
background: #06b6d4;
top: 30%;
left: 50%;
animation-delay: -15s;
animation-duration: 18s;
}
@keyframes orbFloat {
0%, 100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(50px, -30px) scale(1.1);
}
50% {
transform: translate(-30px, 50px) scale(0.9);
}
75% {
transform: translate(30px, 30px) scale(1.05);
}
}Key points
- filter: blur(60px): Creates the diffuse sphere effect
- Varied sizes: Orbs of different sizes add depth
- Negative animation-delay: Desynchronizes the movements
- overflow: hidden: Hides the parts that overflow
5. Starfield / CSS Particles
The starfield creates an animated night sky effect with twinkling stars and occasional shooting stars, entirely in CSS.
Demo interactive
.starfield {
width: 100%;
height: 100vh;
background: radial-gradient(ellipse at bottom,
#1a1a2e 0%, #0a0a0f 100%);
position: relative;
overflow: hidden;
}
.stars {
position: absolute;
inset: 0;
}
.stars-1 {
background-image:
radial-gradient(2px 2px at 20px 30px, white, transparent),
radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 90px 40px, white, transparent),
radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
radial-gradient(1px 1px at 230px 80px, white, transparent),
radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent);
background-repeat: repeat;
background-size: 500px 200px;
animation: starMove 100s linear infinite;
}
.stars-2 {
background-image:
radial-gradient(1px 1px at 50px 80px, white, transparent),
radial-gradient(2px 2px at 120px 20px, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 200px 160px, white, transparent);
background-repeat: repeat;
background-size: 500px 200px;
animation: starMove 150s linear infinite;
opacity: 0.6;
}
@keyframes starMove {
from { transform: translateY(0); }
to { transform: translateY(-200px); }
}
/* Etoiles filantes */
.shooting-star {
position: absolute;
width: 100px;
height: 2px;
background: linear-gradient(90deg, white, transparent);
animation: shoot 3s ease-in-out infinite;
opacity: 0;
}
.shooting-star:nth-child(4) {
top: 20%;
left: 70%;
animation-delay: 0s;
}
.shooting-star:nth-child(5) {
top: 40%;
left: 30%;
animation-delay: 1.5s;
}
@keyframes shoot {
0% {
transform: translateX(0) translateY(0) rotate(-45deg);
opacity: 0;
}
5% { opacity: 1; }
20% {
transform: translateX(-200px) translateY(200px) rotate(-45deg);
opacity: 0;
}
100% { opacity: 0; }
}Best practices and accessibility
Animated backgrounds can improve user experience, but they must be used with caution.
Performance
- Use transform and opacity: These properties are GPU-optimized
- Avoid animating background-position on large surfaces (prefer transform)
- Limit the number of layers: More than 5-6 layers can impact performance
- Test on mobile: Animations can drain the battery
Accessibility
/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
.gradient-mesh,
.aurora-bg::before,
.aurora-bg::after,
.noise-bg::before,
.orb,
.stars,
.shooting-star {
animation: none !important;
}
}
/* Alternative for power saving modes */
@media (prefers-reduced-motion: reduce) {
.animated-bg {
/* Version statique */
background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
}Important
Always implement prefers-reduced-motion for users sensitive to motion. It's a matter of accessibility, not just performance.
Design
- Content contrast: Make sure text remains readable on an animated background
- Subtlety: Slow and gentle animations are less distracting
- Impact zone: Reserve animations for hero sections, not the entire site
Conclusion
These 5 techniques allow you to create impressive animated backgrounds without any JavaScript dependency. From the elegant gradient mesh to the immersive aurora effect, each technique has its use cases.
Don't forget to always prioritize accessibility and performance. A beautiful background is not worth a bad user experience.
Go further
Find these effects and many others in our effects library, with variations and ready-to-use templates.