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

Cloneable rebuild of https://www.dillinger.tv/

Variable Fonts

Variable Font Interactions

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

You need help with fancy Webflow effects?

contact me:
hey@goalhunter.agency

show some love:
https://www.buymeacoffee.com/nettelbeck

Fancy Header

fancy-header

To announce the new blending mode and backdrop filter features, Webflow reached out asking me to design and develop three eye-catching builds in two days. I quickly asked two of my friends, Shelby & Corey, for help creating the designs. This is the one concept that was not chosen.

Project Team
Corey, https://dribbble.com/coreyschneiderdesign
Shelby, https://dribbble.com/shelbybuquet
Timothy, https://dribbble.com/tricks

Future Pharmaceutical

Memberstack

This is everything you need to launch your next SaaS product. 

Whether you’re building from page templates, components, or you’re making your own components from scratch, you’ll save hundreds of hours on your next big launch.

Check out the video tutorials here: https://www.youtube.com/playlist?list=PLaioyinijINcs7-fDxzL-wL-X3l-Ze6kA

BIG thank you to all the creators who helped with the following assets:
Font: Outfit https://fonts.google.com/specimen/Outfit?query=outfit


Generic SaaS Template

The Ultimate SaaS UI Kit | Generic SaaS Template

FRVNCOIS - Hero Text Mask

Interactive text mask

Start your website with our cloneable hero section design perfect for Agency Portfolio 💼

Components & Features:

⦿ Simple yet elegant design
⦿ Background gradient change animation
⦿ Full-Screen Hamburger Menu

--------------

Like this cloneable?  👍 

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

--------------

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

--------------

License:

⦿ Background Mesh Gradients from - https://www.meshgradients.design/

⦿ Iconography from FontAwesome

⦿ Heading Font - "Silk Serif" downloaded from FontShmonts
https://www.fontshmonts.com/text-fonts/silk-serif/

THS12

Agency Cloneable Hero Section

This is a free clonable horizontal hero section for any project you want to develop in the future.

We used only Webflow interactions to animate all divs and texts.

For the settings: Make sure you have selected class Body (all-pages), go to the typography panel and apply 1vw for it.

Font Used: Rosemode

Feel free to use these interactions in any of your projects.

Much more will come!

Hope you like it! :)

Scroll & Text Animations

Start your website with our cloneable hero section design perfect for Agency Portfolio 💼

Components & Features:

⦿ Simple yet elegant design
⦿ Full Screen Slider with custom slider navigation dots along with slide number change animation
⦿ Legacy Interaction for Scroll Down button
⦿ Full-Screen Hamburger Menu
⦿ Stylish link hover interaction

--------------

Like this cloneable?  👍 

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

--------------

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

--------------

License:

⦿ Background image from Unsplash (CC0 license) - https://unsplash.com/photos/iLHDO19h0ng

⦿ Iconography from FontAwesome

THS13

Agency Design 2 Cloneable Hero Section

Hero Image Concept

3D Hero Image Concept

Hard couple of past weeks. Here's something 🌟

Anxiety Hero Section

anxiety-hero-section

Start your website with our cloneable hero section design perfect for Non-Profit or Charity website 🤝

Components & Features:

⦿ Fullscreen Tabs layout to efficiently display large text content 
⦿ Fullscreen Menu with unique hover animations
⦿ Video Lightbox
⦿ Search Functionality

--------------

Like this cloneable?  👍 

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

--------------

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

--------------

License:

⦿ Iconography from FontAwesome

⦿ Images from - Pexels.com (under CC0 license)

⦿ Background gradient from - ls.graphics

THS10

Non-Profit/Charity Cloneable Hero Section

Start your website with our cloneable hero section design perfect for Agency Portfolio 💼

Components & Features:

⦿ Switch between Light and Dark mode
⦿ Full Screen Slider with custom slider navigation dots along with slide number change animation
⦿ Full-Screen Hamburger Menu

--------------

Like this cloneable?  👍 

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

--------------

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

--------------

License:

⦿ Background Mesh Gradients from - https://www.meshgradients.design/

⦿ Background image from Unsplash (CC0 license) - https://unsplash.com/photos/seA-FPPXL-M

⦿ Iconography from FontAwesome

THS14

Agency Design 3 Cloneable Hero Section

Looking to update the hero section of your website homepage? Clone one of our 6 free hero sections.

Clone this templates, copy your favorite to your Webflow website, and that is all!

- - - - - - - - - -

Interested in this free Webflow Cloneable?

• Check out a live preview on: https://hero-sections-cloneable-brixtemplates.webflow.io/

• Click 'Clone project' to get a clone on your Webflow account

• Get the cloneable Figma file to customize the styling and graphics: https://www.figma.com/community/file/1087825555350003165

- - - - - - - - - -

• BRIX Templates - Looking for more Webflow templates? Take a look at our collection of premium & free Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

18. Hero Sections Webflow Cloneable Template

6 Hero Sections Webflow Templates | BRIX Templates

You can customize the distortion effect by changing the attribute's value of class "canvas-container". Here are attributes:
=> data-grid
=> data-mouse
=> data-strength
=> data-relaxation

One thing to keep in mind that we have put Image in Embed because we have added a cross-origin attribute.

Feel free to reach if for suggestions or if you have any problems while implementing this. 

Image Distortion Effect Using threejs

image-distortion-effect-using-threejs

Start your website with our cloneable hero section design perfect for Agency Portfolio 💼

Components & Features:

⦿ Custom cursor
⦿ Full Screen Slider with custom slider navigation dots along with slide change animation
⦿ Full-Screen Hamburger Menu

--------------

Like this cloneable?  👍 

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

--------------

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

--------------

License:

⦿ Images from Unsplash (CC0 license)
⦿ Iconography from FontAwesome

THS15

Agency Design 4 Cloneable Hero Section

Simple moving gradient hero section, using a lottie file and a blur effect to give the background gradient more style, feel free to change gradient to your needs, I hope it has some value for you.

herogradient

Start your website design with our cloneable hero section design perfect for an Architecture Firm or a Construction Company🏛️

Components & Features:

⦿ Modern page load and slider change animations
⦿ Custom line style slider navigation
⦿ 2 lightboxes in each slide - one for video and one for gallery images
⦿ Search functionality with search box that comes from top
⦿ Space saving hamburger menu

---------------

Like this cloneable? 👍

We're coming with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

---------------

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below.

---------------

License:

⦿ Images used in the design are from Pexels and are licensed under CC0 license.

⦿ Iconography from Fontawesome and OrionIconLibrary

Discover herosection websites built by the Webflow community

Discover herosection websites built by the Webflow community