Collection of hand-picked free vanilla JavaScript background effect code examples: change background color or image, animated, with canvas and etc. Update of February 2020 collection. 24 new items.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
Grayscale Ambient Background
Particle background.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: easeljs.js, tweenmax.js
Links
Made with
- HTML / CSS / JS
About a code
BVAmbient - VanillaJS Background Particles
Easy-to-use particle background built with VanillaJS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, bvambient.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Change Background Colour with GSAP ScrollTrigger
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: locomotive-scroll.css, gsap.js, locomotive-scroll.js
Links
Made with
- HTML / CSS / JS
About a code
Unicode Patterns
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
JavaScript Canvas
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
JavaScript Canvas
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Motion Hover Effect for a Background Image Grid
A short tutorial on how to achieve a motion hover effect on a background image grid.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
JavaScript Canvas
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Motion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: victor.js, chroma.js, simplex-noise.js, tweakpane.js
Links
Made with
- HTML / CSS / JS
About a code
1337 Matrix
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Grid Worms
Animates connected nodes about a grid.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus) / JS
About a code
Hello Matrix
Hello World in 92 Languages falling down in Matrix code rain.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less) / JS
About a code
Hello Light
DYNAMIC_DRAW & bufferSubData combo
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS (Babel)
About a code
Random Chevron Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS (Babel)
About a code
Random, Cos and Sin
Click to randomize.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js, chroma.js
Links
Made with
- HTML / CSS / JS (Babel)
About a code
Colorful Circles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS (Babel)
About a code
Colorful Squares
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS (Babel)
About a code
Orange Squares
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Wobble
Play with a colorful wobbly surface. An interactive mouse toy. Make the surface jump and wobble.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Background Shape Change
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Truchet Lattice
A tileable background generator using truchet tiles with alternated coloring.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: p5.js
Links
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
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Metaballs - WebGL
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Fireflies
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Crystal Parallax
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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
Links
Made with
- HTML (Pug) / CSS (Stylus) / JS (Babel)
About a code
Background Rotating Squares
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Sparse Triangle Background
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Tetris Background
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -