Animated background html css

31 CSS Animated Backgrounds

Collection of hand-picked free HTML and CSS animated background code examples from Codepen, Github and other resources. Update of April 2021 collection. 9 new items.

Related Articles

Author

Links

Made with

About a code

CSS Only Pattern Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Background with Waves

Gradient background with some waves on the bottom of the page. If you want a different background for you website or app this is a simple way.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Blurred Animated Gradients

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Bubble Background Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hexagon Background with 0 HTML

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS linear-gradient Animations

Animating a stack of linear-gradients.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Floating Color Orbs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Shooting Star

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Bubble Float

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Falling Leaves CSS Animation

October falling leaves CSS animation CSS no JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Noise Background

CSS only animated static noise background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pattern Animation (Infinite)

Used Flexbox to vertically and horizontally center text. Used keyframes to set an infinite scroll.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Only CSS: Warning

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Cool Mountain Background

Cool mountain background with animations — slightly responsive.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Animated Ripples Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Infinite SVG Triangle Fusion

Triangles are created. Triangles are destroyed.
And so on and so forth. I am creating 60 SVGs that each contain 4 triangles (polygons). Each polygon loops through a color and animates outward from the center point of its parent SVG every 1 second. The entire animation repeats infinitely every 4 seconds.
Each div has a clip-path to create a hexagon mask. When the hexagons are snapped together, the expanding triangles bleed evenly into the triangles of the adjacent hexagons until they disappear.
I used CSS Grid as a starting point, but I was still left with a bunch of well-mannered hexagons with empty space in between. To «connect» the hexagons, I identified the nth-children that corresponds to a row and moved them up and over via transform: translate;

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Источник

35+ CSS Animated Backgrounds for Any Website Style

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

Pure CSS background animation

Author

Made With

Demo

Links

-webkit-background-clip:text CSS effect

Author

Made With

Demo

Links

Animate Background

Author

Made With

Demo

Links

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

Author

Made With

Demo

Links

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.

Author

Made With

Demo

Links

Cloudy Spiral CSS animation

Author

Made With

Demo

Links

pure CSS twinkling stars background

Author

Made With

Demo

Links

Background Effect

Author

Made With

Demo

Links

Pure CSS Particle Animation

Author

Made With

Demo

Links

CSS Fireflies

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

Author

Made With

Demo

Links

infinite SVG Triangle Fusion

Author

Made With

Demo

Links

Animated Ripples background

Author

Made With

Demo

Links

Cool Mountain Background with animations – slightly responsive

Author

Made With

Demo

Links

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

Chameleon background

Author

Made With

Demo

Links

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

Author

Made With

Demo

Links

CSS3 Animation: Background Color Cycle

Author

Made With

Demo

Links

Animation background #1

Author

Made With

Demo

Links

Animated Background Gradient

Author

Made With

Demo

Links

CSS3 Animation – Background colour

Author

Made With

Demo

Links

CSS Animated Background Landing Page

Cover page with an animated background CSS and background pattern overlay

Author

Made With

Demo

Links

Hearts animation background

Author

Made With

Demo

Links

CSS Animation – Background-image-scroll

Author

Made With

Demo

Links

SVG Animation Background

Author

Made With

Demo

Links

Foundation 6 Animated Background

Author

Made With

Demo

Links

Animated CSS mask-image gradient

Author

Made With

Demo

Links

Parallax Background Image

Author

Made With

Demo

Links

Canva moving background effect

Author

Made With

Demo

Links

Parallax Background Effect

Author

Made With

Demo

Links

CSS background effect

Author

Made With

Demo

Links

Animated CSS mask-image gradient

Author

Made With

Demo

Links

Everything “random()” 😛

Author

Made With

Demo

Links

Simple Parallax Background Effect ( Only Css )

Author

Made With

Demo

Links

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

background effect

Author

Made With

Demo

Links

Sliding Diagonals Background Effect

Author

Made With

Demo

Links

Text Clip background effect

Author

Made With

Demo

Links

Psychedelic animated background

Author

Made With

Demo

Links

Similar Posts

10+ Best CSS Table Design Examples with code

See the Pen Pure CSS Responsive Accordion Table by Anthony Collurafici (@CSS3fx) on CodePen. Title Pure CSS Responsive Accordion TableAuthor Anthony ColluraficiMade With HTML CSS See the Pen Pure CSS Table Highlight (vertical & horizontal) by Alexander Erlandsson (@alexerlandsson) on CodePen. Title Pure CSS Table Highlight (vertical & horizontal)Author Alexander ErlandssonMade With HTML CSS See…

The Best 10+ CSS SELECT BOX – GSCODE

See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen. Title:-Completely CSS: Custom checkboxes, radio buttons, and select boxesAuthor:-Kenan YusufMade With:-HTML,CSS See the Pen Select-Boxes by Nipun Paradkar (@radiantshaw) on CodePen. Title:-Select-BoxesAuthor:-Nipun ParadkarMade With:-HTML,CSS,JS See the Pen Custom select box (with jQuery) by Masterov (@Masterov) on CodePen….

Best 30+ Pure CSS Forms That Help to create Form

Login & Sign Up Form Concept Author Dany Santos Made With HTML,CSS,JS Demo Check Out Demo Links Download Credit Card Payment Form Author Jade Preis Made With HTML,CSS,JS Demo Check Out Demo Links Download Payment card checkout Author Simone Bernabè Made With HTML,CSS,JS Demo Check Out Demo Links Download Bullet Journal/Sketch Style Elements Author Olivia…

20 CSS Thumbnail effect

See the Pen THUMBNAIL HOVER EFFECTS by Nikhil Krishnan (@nikhil8krishnan) on CodePen. Pure CSS3 image thumbnail effects, also we can easily change the grid item per row using by sass variable. Title:- THUMBNAIL HOVER EFFECTSAuthor:-Nikhil KrishnanMade With:-HTML CSS See the Pen Thumbnail Presentation with CSS Grid by Aysha Anggraini (@rrenula) on CodePen. This was fun…

CSS Popup/Modal Design: 35+ Examples for Inspiration

Every site developer should have access to CSS Popup/Modal design. You may create amazing and captivating user experiences for your website by using the 35+ examples CSS Popup/Modal provided here, which demonstrate the power of CSS. Title:-Password Modal with Finite State Machine Author:-David Khourshid Made with:- HTML CSS JS Title:-Nifty Modal Window or Slider Effects…

10+ Creatively Cool CSS Wave Text effects Tutorials

Wave text effect is a free, downloadable CSS code that helps you to create unique and attractive text effects. In this article, I have collected 10+ best CSS Wave Text effects from codepen Related Article 50+Cool CSS Text Effects | Text Animation 20+ CSS Neon Text Effects CSS Text Glitch Effect CSS Wave text effects…

Источник