Discover the best background websites created by professional designers. Get inspired and start planning your perfect background web design today!

Moving Background Gradient with dark theme inspired by Webflow Community hero section

Moving Gradient Background

I recently saw the "Unstoppable" site on Awwwards (http://unstoppable.preciosacomponents.com) and of course I wondered if I would be able to recreate it in Webflow. And so I did, but in a Norway theme instead. 🤙

Please let the background video load for a bit, since there's no preloader.

Background video by Pexels.

This Is Norway

This is Norway

We've had a lot of requests for autoscrolling images in background and haven't come across a solution within the Webflow community. Feel free to contribute any suggestions or ideas to improve this feature.

Autoscrolling Images in Background on Infinite Loop

autoscrolling-images-in-background-on-i

Subtle background noise - There are two pages within this project:

1) Custom CSS version
2) 100% Webflow version

Background Noise (CSS)

Background Noise Effect (100% Webflow)

Hi Everyone! Here is an Architecture Magazine layout I built in Webflow to showcase Grid 2.0 and Flexbox. 

The design is by Juraj Masar. Here is his Dribbble page: https://dribbble.com/masar_official

Here is the video tutorial on how I created this layout in Webflow: https://www.youtube.com/watch?v=Oc4HHJ--KHo

WebDev For You - Architecture Magazine Website

From my Webflow online course community came the wish to build this video player, which basically runs in a loop without sound as a background video. 
If you click on on the unmute button, the video plays from the beginning and the sound is activated.  

We need a bit of custom jQuery code for this. In addition, the Vimeo API must be included if you want to address Vimeo iFrames.

Watch the tutorial here: https://youtu.be/mKFZxHpYGng

Vimeo Background Video with Play Sound Toggle

Finsweet

Unique background and section break Lottie icons from Lottieflow! Clone the site, watch the walkthrough tutorials, implement cool animations.

Lottieflow Backgrounds Pack

Lottieflow - Backgrounds Pack

This is just a fun, simple clone I've built to experiment with some interactions.

It features a hero section that reveals changing images & videos (using CSS). I've written some code that will simulate the cycling effect on Tablet/ Mobile. 

My stretch goal is to refine the "menu interaction" (need to spend a bit more time) and implement a dark mode switch. Rebuilt from https://www.cristobalbalenciagamuseoa.com

Hero Changer

Cycle Images on Hover

Hey NoCoders! 💙

Just a little pre-noCodeConf freebie you can use in your next project. 🎉

It's a nice noise background animation I used in several projects already which is completely done with CSS only.

A quick tip: You can make the noise effect more visible by lighting up the body background color.

If you like this please follow me for more. I will publish a few cloneable projects every week! 💎

Cheers,
Cédric

Noise Effect

Noisy Background Effect

CodePen implementation that allows the background color to change.

The following are resource links:
CodePen - https://codepen.io/SynCap/pen/zwaZJv
Live site - http://aurora-background.webflow.io/
Share link - https://preview.webflow.com/preview/aurora-background?preview=a199a7b71bd1d541427c630e5f960f23

Aurora Test

Three.js + Vanta.js

  el: "#inner",
  minHeight: 200.00,
  minWidth: 200.00,
  highlightColor: 0xffbb00,
  midtoneColor: 0xff2000,
  blurFactor: 0.5,
  speed: 1,
  zoom: 1


Source:
https://github.com/tengbao/vanta

Informations: 
✅    Good Browser Compatibility
❌    CPU Intensive (Use Only one Vanta.js Animation per Page)
📳    Mostly Good on Mobile

Three.js Colored Fog

Colored Fog Three.js

Hey this is a very nice Background animation with a really small file size 👌🏻

Github:
https://github.com/crnacura/AmbientCanvasBackgrounds
(I bundled the Js Files)

Change Background Color:
1) download the .txt fill
2) search for „backgroundColor“
3) change the hsla code
4) upload the new file
5) link the new script in the script tag

Swirl Animation

Check this out. Trendy blur gradients using div blocks or SVGs!

Trendy Blur Gradients

Fully parametric, configurable animated gradients done in vanilla WebGl. Reacts to mouse position.

——
You can tweak the parameters keeping the data-test attribute and kill it when you find what you like simply by removing it.

Parameters are served through attributes. Everything is explained in the repo linked in the custom code /body section.

——
CHANGELOG
02/11/12 — fixed controls not disappearing when removing data-test

——
Quite random and can be done better, might make more tweaks in the future. Inspired by the recent @ webflow.com/skylartkitchen AE cloneable.

👀

webgl-gradient

Webgl Reactive Animated Gradient

Remaking a hotel hero I designed a while ago in Webflow: You can see the original shot here: https://dribbble.com/shots/4819890-Afrika-Lodge

Added some CSS to customize the date picker UI. Feel free to clone and reuse.

Afrikana Lodge

Afrikana — Lodge

Motion Hover Effect Background: I tried to replicate the effect using Webflow while trying to achieve something for a client. 
I couldn't pay much attention into this, but I hope it helps someone.
--
♥ What you see? Get even more exclusive content → https://www.patreon.com/flowtreon

Background Grid

background-grid

This is how to use a Vimeo video as background video in Weblow. You can change the video easily within CMS (Editor).

Vimeo Background Video

vimeo-background-video

A one pager to showcase multiple methods to play with background animations, and try to popularize a design idea for rebooting the Print Button.

You're welcome to clone this site and dig into how it's made.

Discover background websites built by the Webflow community

Discover background websites built by the Webflow community