25+ JavaScript Background Effects - Free Code + Demos

Collection of 25+ JavaScript Background Effects. All items are 100% free and open-source. The list also includes change background color or image javascript background effects, and animated.

1. Flow Field N.2

JavaScript Background Effects - Flow field n.2
Author: Fabio Ottaviani (supah)
Created on: January 4, 2020
Made with: HTML, SCSS, Babel
Tags: flowfield, hair, generative, perlin-noise, p5js

2. Sparticles

JavaScript Background Effects - sparticles
Lightweight, High Performance Particles in Canvas
Author: Simon Goellner (simeydotme)
Created on: November 16, 2019
Made with: HTML, SCSS, JS
Tags: falling, snow, christmas, particles, canvas

3. Metaballs - WebGL

JavaScript Background Effects - Metaballs - WebGL
Author: Alfons Nilsson (TC5550)
Created on: November 22, 2019
Made with: HTML, CSS, JS

4. Fill Backgrounds With Animation

JavaScript Background Effects - Fill Backgrounds with Animation
Iterate through every element on a page, colouring them in.
Author: Chris Smith (chris22smith)
Created on: October 17, 2019
Made with: HTML, SCSS, JS
Tags: fill, animation, draw

5. Triple A Wallpapers

JavaScript Background Effects - Triple A Wallpapers
CodePen Challenge B & W & A (design something with only Black, White, and A's) Credits: https://css-doodle.com/ https://codepen.io/akobashikawa/pen/rZRrQN (random google fonts)
Author: Scott Weaver (sweaver2112)
Created on: September 21, 2019
Made with: HTML, CSS, JS
Tags: cpc-b-w-a, unicode, generative, css-doodle, codepenchallenge

6. Fireflies

JavaScript Background Effects - Fireflies
Author: Michal (Mertl)
Created on: March 15, 2019
Made with: HTML, CSS, JS

7. Background Texture Across Several Divs

JavaScript Background Effects - Background texture across several divs
Display a single background texture across several differently coloured divs.
Author: Michael Burridge (mburridge)
Created on: February 19, 2019
Made with: HTML, CSS, JS
Tags: background, div, flexbox, css, nouislider

8. Rymd

JavaScript Background Effects - rymd
Move your mouse, or swipe on a touch device, to navigate through the stars.
Author: Hakim El Hattab (hakimel)
Created on: February 5, 2019
Made with: HTML, SCSS, Babel
Tags: canvas, experiment, space

9. 💎 Crystal Parallax 💎

JavaScript Background Effects - 💎 Crystal Parallax 💎
Enjoy this shiny Crystal Parallax! Turn Glow Off for better performance (JS Line 35)
Author: Tibix (Tibixx)
Created on: December 17, 2018
Made with: HTML, CSS, JS
Tags: crystal, animation, canvas, glow, effect

10. Animated CSS Mask-image Gradient

JavaScript Background Effects - Animated CSS mask-image gradient
Author: Chris Neale (onion2k)
Created on: December 9, 2018
Made with: HTML, SCSS, Babel

11. Spipa Circle

JavaScript Background Effects - Spipa circle
Labyrinthine creations made from Tunisia and inspired by my wandering experience there. Force fields and randomness. This one is hundreds of me being dragged around in Tunis' souk by a random dude who wanted to show me something. Particles never hit each other. A spot becomes free after ...
Read More
Author: Alex Andrix (alexandrix)
Created on: December 3, 2018
Made with: HTML, Less, JS
Tags: particles, physics, canvas, tunisia, labyrinth

12. Background Rotating Squares

JavaScript Background Effects - Background Rotating Squares
Author: AzazelN28 (AzazelN28)
Created on: November 14, 2018
Made with: Pug, Stylus, Babel
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug

13. SVG Cosmos Pattern

JavaScript Background Effects - SVG Cosmos Pattern
I've tried to use the SVG element to create an animated pattern. This is as far as I've come but unfortunately, the animations aren't very performant, so I've added a toggle to turn them on/off. Parallax stars by https://codepen.io/saransh/pen/BKJun
Author: agathaco (agathaco)
Created on: October 5, 2018
Made with: HTML, SCSS, Babel
Tags: svg, animation, gsap, greensock, pattern

14. Ashfall

JavaScript Background Effects - Ashfall
The ash falls as I look up in this burned out world.
Author: Liam Egan (shubniggurath)
Created on: September 6, 2018
Made with: HTML, SCSS, Babel
Tags: glsl, 2d, shader

15. Color Changin'

JavaScript Background Effects - Color Changin'
Click anywhere. Built with @juliangarnier's anime.js. ...Also basically using his fireworks, which are pretty rad (and available here)
Author: Alex Zaworski (alexzaworski)
Created on: August 25, 2016
Made with: HTML, SCSS, JS
Tags: canvas

16. Æther

JavaScript Background Effects - æther
Author: Sean Free (seanfree)
Created on: November 19, 2018
Made with: SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: canvas, javascript, simplex noise

17. Calm Breeze Login Screen

JavaScript Background Effects - Calm breeze login screen
A ultra simple login screen on a calm breezy day,
Author: Lewi Hussey (Lewitje)
Created on: May 1, 2015
Made with: HTML, Less, JS
Tags: animation, css-animation, keyframes, login, material design

18. Random Responsive Balls In The Background

JavaScript Background Effects - Random Responsive balls in the background
Author: Nash Vail (nashvail)
Created on: December 19, 2017
Made with: CSS, JS

19. Personal Website

JavaScript Background Effects - Personal Website
I got the evening off and I decided to rebuild my personal page. Will probably be adding some things to it, but I will try to keep it as clean as possible.
Author: Jonas Badalic (JonasBadalic)
Made with: HTML, CSS, JS

20. Space Elevator

JavaScript Background Effects - Space Elevator
Author: Eslam Yahya (Eslam-Yahya)
Created on: July 30, 2017
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug

21. Antigravity FLOW

JavaScript Background Effects - Antigravity FLOW
Author: Marco Dell'Anna (plasm)
Created on: March 15, 2017
Made with: HTML, Sass, Babel

22. Fancy Background Shapes

JavaScript Background Effects - Fancy Background shapes
I was away for a while seeking for inspiration =D Now i am back with this little simple pen.
Author: Godje (Godje)
Created on: March 9, 2017
Made with: JS
Tags: javascript, canvas, animation, gui, 2d

23. Sea Waves

JavaScript Background Effects - Sea Waves
Best viewed in Chrome! Firefox doesn't work unfortunately due to a known issue. Abstract sea waves. Made by animating lots and lots of circles that animate using sinus and cosinus values!
Author: Stefan Weck (stefanweck)
Made with: HTML, CSS, Babel

24. Move Background Perspective On Mouse Move Effect

JavaScript Background Effects - Move background perspective on mouse move effect
Author: Kriszta (vajkri)
Created on: March 18, 2016
Made with: HTML, SCSS, JS
Tags: css-effect, mouse-move, effect, fx, mouse effect