Collection of hand-picked free vanilla JavaScript background effect code examples: change background color or image, animated, with canvas and etc.

Related Articles

  1. CSS Animated Backgrounds
  2. jQuery Background Plugins

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Flow Field N.2

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

Responsive: yes

Dependencies: p5.js

Author

  • Simon Goellner

Made with

  • HTML / CSS (SCSS) / JS

About a code

Obligatory Falling Snow

Try playing with the parameters on the gui to the right. The falling snow is just one effect of a countless number of possibilities.

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

Responsive: yes

Dependencies: sparticles.js, dat.gui.js, stats.js

Author

  • Alfons Nilsson

Made with

  • HTML / CSS / JS

About a code

Metaballs - WebGL

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

Responsive: yes

Dependencies: -

Author

  • Chris Smith

Made with

  • HTML / CSS (SCSS) / JS

About a code

Fill Backgrounds With Animation

Iterate through every element on a page, colouring them in.

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

Responsive: yes

Dependencies: -

Author

  • Scott Weaver

Made with

  • HTML / CSS / JS

About a code

Triple "A" Wallpapers

Click for new pattern.

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

Responsive: yes

Dependencies: css-doodle.js, webfont.js

Author

  • Michal

Made with

  • HTML / CSS / JS

About a code

Fireflies

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

Responsive: yes

Dependencies: -

Author

  • Michael Burridge

Made with

  • HTML / CSS / JS

About a code

Background Texture Across Several Divs

Display a single background texture across several differently coloured divs.

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

Responsive: yes

Dependencies: nouislider.js

Author

  • Hakim El Hattab

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

rymd

Move your mouse, or swipe on a touch device, to navigate through the stars.

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

Responsive: yes

Dependencies: -

Author

  • Tibix

Made with

  • HTML / CSS / JS

About a code

Crystal Parallax

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

Responsive: yes

Dependencies: -

Author

  • Chris Neale

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Animated CSS Mask-Image Gradient

Animated CSS mask-image gradient with JavaScript.

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

Responsive: yes

Dependencies: -

Author

  • Alex Andrix

Made with

  • HTML / CSS (Less) / JS

About a code

Spipa Circle

Particles never hit each other. A spot becomes free after a certain number of steps.

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

Responsive: yes

Dependencies: lodash.js

Author

  • AzazelN28

Made with

  • HTML (Pug) / CSS (Stylus) / JS (Babel)

About a code

Background Rotating Squares

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

Responsive: yes

Dependencies: -

Author

  • agathaco

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

SVG Cosmos Pattern

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

Responsive: yes

Dependencies: tweenmax.js, drawsvgplugin.js

Author

  • Liam Egan

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Ash Fall

The ash falls as I look up in this burned out world.

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

Responsive: yes

Dependencies: three.js, ccapture.js

Author

  • Alex Zaworski

Made with

  • HTML / CSS (SCSS) / JS

About a code

Color Changing

Click anywhere.

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

Responsive: yes

Dependencies: anime.js