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

Hello Webflow fam 👋,

Inspired by the Webflow Community Hero Section, I present to you a fully cloneable blurry animated background gradient that can be used in your hero section or any other section of your liking.

The animation is 100% native with Webflow interactions and utilizies colored div blocks and CSS scaling. The animation was tinkered by inspecting the Webflow Community Section using the dev tools 😉

Let me know what y'all think.

Animated Gradient Background

Animated Blurry Gradient Background

Create a static background effect using only an image and an animation. This was made based on CJHersh example. 

Sign up if you want the lesson: https://www.webflowtips.com/b/how-to-create-a-static-effect



P.S 🙂  🙌  - Like or follow if this was useful for you. 

2 of 50

Webflowtips - Static background effect

How to create a static effect?

This demo showcases a grain background effect with a hover animation over the image. The image was also edited via photomosh.com.

The grain was created in Photoshop, and the hover Illustration was created in Illustrator.

Inspired by this new Spotify website here: https://carnival.withspotify.com/

WebDev for You - Interaction #151

WebDev For You - Interaction #151

Wallpapers by STRV is a selection of desktop and mobile 3D wallpapers created by the STRV Design Team.

Discover backgrounds websites built by the Webflow community

Discover backgrounds websites built by the Webflow community