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

15 JavaScript Background Effects

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. CSS Background Patterns
  3. CSS Fixed Backgrounds
  4. CSS Particle Backgrounds
  5. CSS Triangle Backgrounds
  6. 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

back to top