No description

Find a file

Ruben Ramirez 9553a305b4 Fix animation snaps and add new Breath effect - Fix #4 striped loader snap: use precise 28.28px background-size for seamless loop - Fix #6 glow border: animate gradient using pseudo-element with mask-composite - Add #8 Breath: new symmetric in-out aura animation (dim→bright→dim) - Update count to 8 animated backgrounds		2026-02-17 18:03:08 -06:00
animated-backgrounds.html	Fix animation snaps and add new Breath effect	2026-02-17 18:03:08 -06:00
README.md	Add 7 animated CSS background effects with live demos	2026-02-17 16:37:37 -06:00

CSS Animated Backgrounds

A collection of 7 beautiful animated CSS gradient backgrounds. Each effect is demonstrated with live examples and copy-ready code.

Usage

Simply open animated-backgrounds.html in your browser to see all effects in action.

#	Effect	Description
1	Classic Gradient	Smooth shifting 4-color gradient with oversized background for motion
2	Aurora Borealis	Multiple animated layers with organic, unpredictable northern lights effect
3	Shimmer Text	Gradient lives inside letters using `background-clip: text`
4	Striped Loader	Repeating gradient creates scrolling diagonal stripes
5	Gradient Wave	Simple two-color gradient with sine-wave like motion
6	Glow Border	Neon-style outline using gradient `border-image`
7	Pulse Aura	Breathing halo effect using `::before` pseudo-element

Each demo card includes the full CSS code needed to implement that effect. Click and copy the code block directly from the page.

Gradient animations: Using background-size + background-position animation
Multiple layers: Stacking radial gradients with mix-blend-mode: screen
Pseudo-elements: ::before and ::after for additional animated layers
Text clipping: background-clip: text for gradient text effects
Repeating gradients: repeating-linear-gradient for stripe patterns

Works in all modern browsers that support: