35+ CSS Animated Backgrounds Effects

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

Pure CSS background animation

See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.

-webkit-background-clip:text CSS effect

See the Pen Animated Background by Marco Guglielmelli (@MarcoGuglielmelli) on CodePen.

Animate Background

See the Pen Rotation & background experiment by Zach Saucier (@ZachSaucier) on CodePen.

Rotation & background experiment

Move your mouse around, see the result. No SVG/canvas/anything else! I really like the effect

More rotational objects can be added easily, just add the appropriate HTML structure (including the necessary classes)

This could also be combined with a CSS-only square container and made responsive very easily. For an example of the technique, check here http://codepen.io/Zeaklous/pen/ImGaH

See the Pen Parallax Star background in CSS by Saransh Sinha (@saransh) on CodePen.

Parallax Star background in CSS

Using a very simple sass function, and CSS animation key frames, built parallax scrolling stars in space. The sass function creates a random star field on each load.

See the Pen Cloudy Spiral CSS animation by Hakim El Hattab (@hakimel) on CodePen.

Cloudy Spiral CSS animation

See the Pen Cloudy Spiral CSS animation by Hakim El Hattab (@hakimel) on CodePen.

pure CSS twinkling stars background

See the Pen CSS Background Effect by Osorina Irina (@osorina) on CodePen.

Background Effect

See the Pen Pure CSS Particle Animation by Takeshi Kano (@tonkotsuboy) on CodePen.

Pure CSS Particle Animation

See the Pen CSS Fireflies by Mike Golus (@mikegolus) on CodePen.

CSS Fireflies

An elegant HTML/CSS only solution for adding a tranquil fireflies effect to you page.

See the Pen Infinite SVG Triangle Fusion by Rob DiMarzo (@robdimarzo) on CodePen.

infinite SVG Triangle Fusion

See the Pen Animated Ripples background by Vaibhav Arora (@vaibhavarora) on CodePen.

Animated Ripples background

See the Pen Cool Mountain Background with animations – slightly responsive by Igor Milenkovic (@imilenig) on CodePen.

Cool Mountain Background with animations – slightly responsive

See the Pen Chameleon background by Roland Warmerdam (@Rowno) on CodePen.

Chameleon background

See the Pen Animation Background-Clip Text Effect – Using Only HTML & CSS by Ahmad Emran (@ahmadbassamemran) on CodePen.

Animation Background-Clip Text Effect – Using Only HTML & CSS

See the Pen CSS3 Animation: Background Color Cycle by SJ Calamia (@metagrapher) on CodePen.

CSS3 Animation: Background Color Cycle

See the Pen Animation background #1 by Maxim (@cnupm99) on CodePen.

Animation background #1

See the Pen Animated Background Gradient by katmai7 (@katmai7) on CodePen.

Animated Background Gradient

See the Pen CSS3 Animation – Background colour by Mana (@manabox) on CodePen.

CSS3 Animation – Background colour

See the Pen CSS Animated Background Landing Page by Tania Rascia (@taniarascia) on CodePen.

CSS Animated Background Landing Page

Cover page with an animated background CSS and background pattern overlay

See the Pen Hearts animation background by Pogany (@giaco) on CodePen.

Hearts animation background

See the Pen CSS Animation – Background-image-scroll by jonathan (@tan-ramos-web) on CodePen.

CSS Animation – Background-image-scroll

See the Pen SVG Animation Background by Yoshiyuki ITO (@thanks2music) on CodePen.

SVG Animation Background

See the Pen Foundation 6 Animated Background by Anthony Potgieter (@anthonypotgieter) on CodePen.

Foundation 6 Animated Background

See the Pen Animated CSS mask-image gradient by Chris Neale (@onion2k) on CodePen.

Animated CSS mask-image gradient

See the Pen Parallax Background Image by ShaylonH (@shaylonh) on CodePen.

Parallax Background Image

See the Pen Canva moving background effect by Justin (@j1f) on CodePen.

Canva moving background effect

See the Pen Parallax Background Effect by Kasey Bonifacio (@kaseybon) on CodePen.

Parallax Background Effect

See the Pen CSS background effect by turusuke (@turusuke) on CodePen.

CSS background effect

See the Pen Animated CSS mask-image gradient by Chris Neale (@onion2k) on CodePen.

Animated CSS mask-image gradient

See the Pen Everything “random()” 😛 by Unmesh Shukla (@unmeshpro) on CodePen.

Everything “random()” 😛

See the Pen Simple Parallax Background Effect ( Only Css ) by MinimalCoding (@MinimalCoding) on CodePen.

Simple Parallax Background Effect ( Only Css )

See the Pen background effect by Mert Köseoğlu (@mksglu) on CodePen.

background effect

See the Pen Sliding Diagonals Background Effect by Rosy Babu (@rosybabu8) on CodePen.

Sliding Diagonals Background Effect

See the Pen Text Clip background effect by Hervé (@herve) on CodePen.

Text Clip background effect

See the Pen Psychedelic animated background by simon (@simonpatrat) on CodePen.

Psychedelic animated background