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
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: January 4, 2020
Made with: HTML, SCSS, Babel
Tags: flowfield, hair, generative, perlin-noise, p5js
2. Sparticles
Lightweight, High Performance Particles in Canvas
Author: Simon Goellner (simeydotme)
Links: Source Code / Demo, Github Page
Created on: November 16, 2019
Made with: HTML, SCSS, JS
Tags: falling, snow, christmas, particles, canvas
3. Metaballs - WebGL
Author: Alfons Nilsson (TC5550)
Links: Source Code / Demo
Created on: November 22, 2019
Made with: HTML, CSS, JS
4. Fill Backgrounds With Animation
Iterate through every element on a page, colouring them in.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: October 17, 2019
Made with: HTML, SCSS, JS
Tags: fill, animation, draw
5. 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
Author: Michal (Mertl)
Links: Source Code / Demo
Created on: March 15, 2019
Made with: HTML, CSS, JS
7. Background Texture Across Several Divs
Display a single background texture across several differently coloured divs.
Author: Michael Burridge (mburridge)
Links: Source Code / Demo
Created on: February 19, 2019
Made with: HTML, CSS, JS
Tags: background, div, flexbox, css, nouislider
8. Rymd
Move your mouse, or swipe on a touch device, to navigate through the stars.
Author: Hakim El Hattab (hakimel)
Links: Source Code / Demo
Created on: February 5, 2019
Made with: HTML, SCSS, Babel
Tags: canvas, experiment, space
9. 💎 Crystal Parallax 💎
Enjoy this shiny Crystal Parallax! Turn Glow Off for better performance (JS Line 35)
Author: Tibix (Tibixx)
Links: Source Code / Demo
Created on: December 17, 2018
Made with: HTML, CSS, JS
Tags: crystal, animation, canvas, glow, effect
10. Animated CSS Mask-image Gradient
Author: Chris Neale (onion2k)
Links: Source Code / Demo
Created on: December 9, 2018
Made with: HTML, SCSS, Babel
11. 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)
Links: Source Code / Demo
Created on: December 3, 2018
Made with: HTML, Less, JS
Tags: particles, physics, canvas, tunisia, labyrinth
12. Background Rotating Squares
Author: AzazelN28 (AzazelN28)
Links: Source Code / Demo
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
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)
Links: Source Code / Demo, Codepen.io
Created on: October 5, 2018
Made with: HTML, SCSS, Babel
Tags: svg, animation, gsap, greensock, pattern
14. Ashfall
The ash falls as I look up in this burned out world.
Author: Liam Egan (shubniggurath)
Links: Source Code / Demo
Created on: September 6, 2018
Made with: HTML, SCSS, Babel
Tags: glsl, 2d, shader
15. 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)
Links: Source Code / Demo
Created on: August 25, 2016
Made with: HTML, SCSS, JS
Tags: canvas
16. Æther
Author: Sean Free (seanfree)
Links: Source Code / Demo
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
A ultra simple login screen on a calm breezy day,
Author: Lewi Hussey (Lewitje)
Links: Source Code / Demo
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
Author: Nash Vail (nashvail)
Links: Source Code / Demo
Created on: December 19, 2017
Made with: CSS, JS
19. 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)
Links: Source Code / Demo
Made with: HTML, CSS, JS
20. Space Elevator
<3
Author: Eslam Yahya (Eslam-Yahya)
Links: Source Code / Demo
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
Author: Marco Dell'Anna (plasm)
Links: Source Code / Demo
Created on: March 15, 2017
Made with: HTML, Sass, Babel
22. 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)
Links: Source Code / Demo
Created on: March 9, 2017
Made with: JS
Tags: javascript, canvas, animation, gui, 2d
23. 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)
Links: Source Code / Demo
Made with: HTML, CSS, Babel
24. Move Background Perspective On Mouse Move Effect
Author: Kriszta (vajkri)
Links: Source Code / Demo
Created on: March 18, 2016
Made with: HTML, SCSS, JS
Tags: css-effect, mouse-move, effect, fx, mouse effect
More Awesome Lists:
Share: