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

Abdul Wahab

Heyabdulwahab

This is our 2nd cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://overlay-images-navigation.webflow.io/.
Overlay images animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ CMS Images 

Follow me for more Webflow freebies in the future 💙

Overlay Images Navigation — Cloneable # 2

Webflow

Make the most of grid overlap for more creative layouts.

Overlapping grid

Jonas Arleth

Once the popup is open, scrolling of the entire page is disabled using custom code (body = overflow hidden). This helps longer content in the popup overlay to scroll more comfortably without accidentally scrolling the whole page. For the video popup, additional custom jQuery code is needed to stop the video from running in the background when the close button is clicked.

Tutorial: https://youtu.be/JbNtDkrfH0U

Custom Content and Video Popup / Modal

This is our 4th cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://project-page-concept.webflow.io/. 
Overlay images animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ CMS Images 

Follow me for more Webflow freebies in the future 💙

Project Page Concept — Cloneable # 4

Osmo

Until launch, we’re offering a free cloneable every single week, so you can get a feel for what’s coming.

Join the waitlist → https://osmo.supply/

Custom Menu with GSAP

Gallery to Overlay Transition with GSAP Flip – Osmo

Vishal Agrawal

You can now change the colour of text on an SVG overlay

Steps
1. Take a div block and add a background colour.
2. Add SVG to the div block as a background image.
3. Add Text element in the div
4. Apply the same colour to text as div block's
5. Copy and paste the CSS code and change the class in code to the text's class.
6. click the publish button

Boom code applied. ENJOY!

Mix Blend Mode

Memberstack

MemberStack freebie #6! 

Use this just-in-time pricing table to upsell your products or services when a user clicks on a premium feature or wants to see your pricing.

The site is mobile friendly, user-friendly, and designer-friendly. I hope it comes in handy on a future project!

MemberStack is not required to use this project. 

If you need any help, you can reach us via the chat on MemberStack.io or our email team@memberstack.io.

#6 - Pricing Modal | Upgrade Modal

MemberStack is a designer-friendly membership platform that works with Webflow. 

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

Modals are an excellent way to help your users feel in control. Let them create an account or log in to an existing account without ever having to leave the page. 

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

To get started - create a free MemberStack account, and add the URL of your new site during setup.

#10 - Login and Signup Modals

Split-screen, full-screen navigation with animation (native Webflow component). 
The navigation can be displayed on desktop as an overlay or on tablet and mobile as a full screen. Jonas also explains how to split the navigation into components to make it easier to edit. He shows various animation effects such as scaling and shifting and explains how to create stagger effects inside of the navbar.

Tutorial: https://youtu.be/4SymjbqZpxg

Full screen Overlay Navigation with Splitscreen + Animation [Free Template]

This is our 5th cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://animated-cursor-1.webflow.io/. 
Cursor animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ Monument expanded Font  

Follow me for more Webflow freebies in the future 💙

Animated Cursor — Cloneable # 5

Vincent Bidaux

A simple one-pager with a grid of teasers and full nodes as hidden panels. Both the page and the panels are scrollable vertically. There is still an issue with double elevators that I wish I could resolve.

There are two things to consider when reviewing this work:

1/ The teaser + panel is one element with one reusable interaction. It means you can duplicate it and it will continue to work without interferences. That was not easy to do. That's why the clising button is outside of the element and works for every element.

2/ Check the Dashboard page: as the full node panels are hidden, it can be tedious to edit. So the content of the panels sits in a div that is transformed to a Symbol. This page hosts all the symbols so the edition of the pages is way easier. There are many occasions where you can use Symbols for difficult to access content, so you can create a dashboard page for it.

Clone it, make it better! Check in the comments about how to licence the images for yourself.

People Wish - A layout with Webflow

Flowcraft

Overlay Form Call to Action

Tinyflow

overlay-navigation-interaction-1

Halftone Digital

Working Webflow file from our Custom Mobile Navigation tutorial. Learn to build custom navigation in Webflow that features disabling scrolling on full-screen mobile navs, animating the hamburger menu, and more.

Watch the full tutorial here: https://youtu.be/wJT21XwNhWU

paul-mobile-nav

Yader Gil

Here is another overlay and overlap Design for the Webflow Community. Now I was focus on the desktop version.

video-production-4e8cd1

Formatically is a free, automatic MLA formatting tool for students.

For full functionality visit www.Formatically.com. We are using Django to collect, create, and deliver word documents to students.

My best friend and I were in high school when we had the first version of this site built for us. We had no idea what javascript or UX design were at the time!
Now, 4 years later we were able to build it from the ground up using Webflow!

Formatically.com

Happy Thursday! Back with another membership freebie.

This one is a cancellation insights form that receives user data from Memberstack. Instead of allowing users to cancel their accounts via the default profile UI, we've created our own 100% in Webflow. All of the form data is submitted directly to Webflow, meaning we can export and analyze the results at any point. 

The cancellation form is currently in a modal, but that could easily be its own separate page. I hope this works well for you! If you have any questions, please leave a comment or contact me directly. duncan@memberstack.com

(Inspired by Baremetrics).

Membership Cancellation Form

102022939

1026885926

102976941

1038319252

gpt-5-nano

1098530826

gpt-4.1-mini

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

{{count}} {{sites}} {{exceed}} client seat limit. Excess seats will be removed.

Client seats

Free guest access to client Workspaces won’t be available.

Guest access

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-5

1181518147

1186914386

claude-opus-5

119812244

1207293145

1249999967

1270011358

1274323923

1338389614

140432223

1444732314

1462086697

1472415557

1506258256

1514009179

1528308495

15382271

1559290700

1567550242

1592612642

1609688815

1621889036

1631162196

1674778404

1692956854

1696523225

17004821

1726628865

173867728

173927913

1768015773

gpt-5.5

1771795565

1863160016

1870758752

1905118106

1919353748

193274770

193713651

1960278590

1975670756

1977767562

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2031366339

2104957652

2144870841

2147413158

2167006968

2216482092

2243824526

2250401860

225169335

2256326107

2291666157

2320791503

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2355832585

2401116685

2401437500

2486364096

gpt-4o

gpt-5-mini

gpt-4o-mini

2493307210

2546957535

2556595834

2562948942

2624148589

2639613659

265457401

2717840929

2749253609

2789269995

2826734787

2842505721

284989039

285302288

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

2940878268

2972123611

2977143887

3022611874

3023147062

3026881092

3040272982

3056387847

3057360577

3070246498

307653616

3099012871

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Join client workspaces for free and add up to 5 users from your workspace

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3220870747

32368712

3238278814

3256408208

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3417108561

Best Overlay Websites | Free Examples & Designs

Discover Overlay websites
built by the Webflow community

Start with a clone. Make it yours with an AI agent.

Discover Overlay websites built by the Webflow community

Start with a clone. Make it yours with an AI agent.

Discover Overlay websites
built by the Webflow community