7 Free CSS Particle Backgrounds

• Backgrounds, Particle
7-free-css-particle-backgrounds

A collection of hand-picked HTML and CSS particle background code examples.

  1. CSS Animated Backgrounds
  2. CSS Background Patterns
  3. CSS Fixed Backgrounds
  4. jQuery Background Plugins

About the code

Pure CSS Particle Animation

CSS particle animation without JavaScript. The most important point is random movement of particles. The vignetting was created by mask-image property.

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

Responsive: yes

Dependencies: –

About the code

CSS Particles Background

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

Responsive: yes

Dependencies: –

Author

  • Envato Tuts

About the code

Animated Particle Background

An animated particle background in pure CSS.

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

Responsive: yes

Dependencies: –

Author

  • Rémi Denimal

About the code

Random Particles Animation

Loop with Sass & Compass of random circle particles.

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

Responsive: yes

Dependencies: –

Author

  • Alexi Taylor

About the code

CSS Particles

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

About the code

Pure CSS Particles

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

Responsive: yes

Dependencies: –

About the code

CSS Particle Style Animation

Playing around with an effect to include on the product page of Outfit.io

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

Responsive: yes

Dependencies: –

10 CSS Fixed Backgrounds

• Backgrounds, Fixed
10-css-fixed-backgrounds

Collection of hand-picked HTML and CSS fixed background code examples.

  1. CSS Animated Backgrounds
  2. CSS Background Patterns
  3. jQuery Background Plugins

About the code

Background-Attachment Fixed

Fixed background with scrolling content.

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

Responsive: yes

Dependencies: –

About the code

background-attachment: fixed;

Background with CSS propety background-attachment: fixed;

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

Responsive: yes

Dependencies: –

Author

  • carpe numidium

About the code

Background Scroll Effect

Pure CSS background image scroll effect.

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

Responsive: yes

Dependencies: –

Author

  • Ali Klein

About the code

Background Attachment Fixed

Pure CSS background attachment fixed within container.

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

Responsive: no

Dependencies: –

Author

  • Geoff Graham

About the code

Scrolling Backgrounds In CSS

Seattle trip: scrolling backgrounds in CSS with background-attachment: fixed;

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

Responsive: yes

Dependencies: –

Author

  • Justin Aven

About the code

Fixed Background Full Sections

Defined full screen sections with atlernating sections having fixed / no-scrolling background images.

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

Responsive: yes

Dependencies: –

Author

  • codyhouse.co

About the code

Fixed Background Effect

A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.

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

Responsive: yes

Dependencies: jquery.js

About the code

Scroll Magic In Plain CSS

If mouse wheel down … scroll right.

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

Responsive: yes

Dependencies: –

Author

  • Joshua Mitchell

About the code

Retro CSS Slideshow

CSS slideshow with background-attachment: fixed;

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

Responsive: yes

Dependencies: –

Author

  • Derek Palladino

About the code

Scroll Flip-Book

Using background images and different sections revealing each fixed background image to create a flip-book effect.

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

Responsive: no

Dependencies: –