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

Timothy Ricks

Learn how to build this and many other interactions on my YouTube Channel at https://www.youtube.com/watch?v=gSWQPaybNiI

Learn how to build a working CMS Pricing Calculator and other Javascript lessons on my Patreon at https://www.patreon.com/timothyricks

T.RICKS Glassmorphism

Mubarak Marafa

Wanted to mess around with Frosted glass. Started out in Figma and then wanted to see how I could implement it in CSS so I brought it to Webflow!

Quite happy with the results. Not sure how 'new' this trend is. Trends just seem to go away only to come back later. I remember Microsoft doing this a few years back! But, always happy to explore a fresh new take on a trend!

Let me know what you think!

Frosted Glassmorphism

Kevin Haag

I'm back! Just a tiny little native interaction to get MicroMonday started again. Enjoy!

✅ Native Interactions
❌ Custom Code

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

MM—018: Glass Navigation Bar

Webflowtips

Here is a simple form using a frosted glass effect

✔ No custom code
✔ Client First v1

Sign up for the lesson: https://www.webflowtips.com/b/how-to-create-a-frosted-glass-effect

If you have any questions feel free to comment.

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

Glass Effect Form

Moment

Encompassed Campers

Totally free cloneable. This was a fun project that came about from a client/friend that had to pull the plug for unforeseen circumstances. 

Includes:
- Several Unique Pages
- Template pages
- Contact Form
- CMS 
- Custom Code (I'm not a coder so don't hate me if it looks messy)
- Animations
- Lotties

The site is built around the business model of customised camper vans used for exploring and adventure. Bold fonts and constrasting colours create a strong impact, and the imagery does the rest. 

**Note: this was initially meant to be done for a client but didn't go ahead so I've built this in a couple days as I thought it would be a fun cloneable for the community. So there are definitely some bugs and please ignore how I lay everything out (I'm not very tidy).**

Have fun and let me know if you like the site!

Encompassed Campers

Stefan Velikov

Glass Card Interaction made with Webflow using only "backdrop-filter: blur()" as custom styling

Hope you like it :)

Glass credit card interaction

‪elyakim goldfus‬‏

With this CTA button, you'll engage users and get their attention.

Just clone this button to your project!

Glassy animated  button (Button 15)

Ion (Ivan) Sipilov

Due to the COVID time, one of the ways to explore new parts of the world is through your design! So here is my modest template for a travel agency. Fully animated. Enjoy! 

Check out my dribbble page: https://dribbble.com/ivanshdesign
Figma file for it: figma.com/@ionsipilov

[Free to clone 🤙] Conquer The Jungle | Travel Website | Travel Agency

Ali Tariq

Wanted to quickly play around with interactions using soothing color palettes and shapes. Apparently, this style of effect--referred to as the Aurora effect or a type of glassmorphism--is going to be more commonly seen this year.

Check out this video to learn more about Aurora UI and how visual interest plays such an important role in creating effective websites:

https://www.youtube.com/watch?v=0_MDRXWLlJ8

Feel free to clone and adjust away!

Soothing auroramorphic color effect

Francesco Castronuovo

🚀 Want to recreate Apple’s stunning new liquid glass navbar effect in Webflow?

I’ll show you step-by-step how to achieve this beautiful look — using only native Webflow tools, a simple SVG filter, and no extra code.

🔹 What you’ll learn:

✅ How to structure a layered navbar for realistic glass effects
✅ How to apply and tweak SVG filters for smooth liquid distortion
✅ How to fine-tune shadows, tint, and contrast
✅ How to create an elegant, modern UI — no libraries required!
✅ How to understand the basics of displacement maps, Gaussian blur, and turbulence in SVG filters

👉 Perfect for designers who want to push Webflow further and bring a touch of Apple magic to their projects.

👉 Watch on YouTube: https://youtu.be/X0MYB9BHu60

📂 Helpful Resources:

- Full Localization Site | Webflow University: https://webflow.com/made-in-webflow/website/astralfundbank

Glass Navbar Effect

Danny Thomas

Glass Morphism Hover Card W/ ALL Reusable Components! 

The Chip, Embossment, Mastercard Logo, And Paypass Icon are All individually copyable, so you can reuse them yourself, increasing productivity! 

Card Background blur .css code from Timothy Ricks on Youtube!

Glass Morphism Hover Card W/ ALL Reusable Components!

Memberstack

Hey everyone!

Here's a glassmorphism themed pricing table that comes with Memberstack attributes and default modals pre-applied!

Enjoy!

Glassmorphism Pricing Table | Freebie

Duncan Hamra

Made this a few months back when exploring new brand guidelines. I still really like it! Hope you do it 😁 All of the effects where accomplished inside Webflow.

Glassy UI

Bradley Stallcup

Heres a neat little template for searching a collection and featuring special logos at the bottom. The code combines two collections using Finsweet's CMS Library and then searches it with some code that PixelGeek had in a video way back.

There's a neat little contact button I made and a scrolling marquee that just uses Webflow interactions. And to top it off theres a simple CSS class added to the marquee for a frosted glass look. Enjoy!

Instant Search w/ Marquee

Gladwebs

This is smooth, elegant, high-quality, and has a sticky glass effect nav.

Price comparison chart with smooth interaction and sticky nav - Gladwebs

Mary Kuzmina

Here is a prototype of future AR Glasses concept for the taxi ordering process, illustrating animation and interaction if taxi on the way to pick up place.
Served with custom cursor, a lot of animation and interactions :)

AR Glasses Concept for Taxi Company

In this tutorial we’ll build a crystal-like glassy button in Webflow using the magic of SVG filters and the power of GSAP.

🔹 You’ll learn how to:

✅ Set up the page structure and button styling
✅ Apply a custom SVG filter with backdrop-filter: url(#glass)
✅ Load a displacement map with JavaScript
✅ Animate the effect on hover with GSAP (soft glass ➝ icy crystal)
✅ Customize parameters like blur, scale, and duration to make the effect your own

👉 Watch on YouTube: https://youtu.be/jquGkq1cgQI

📂 Helpful Resources:
- SVG filters playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYq0H_TjbEFgbkz1XEzfnll

Glassy Button with SVG Filters + GSAP Hover Animation

Built with layered blur techniques, fine-tuned opacity, gradient overlays, and subtle inner borders, it delivers true glassmorphism that looks exactly like your Figma mockups.

Figma's Glassmorphism Effect

102022939

1026885926

102976941

1038319252

gpt-5-nano

1070795817

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-4-5

1181518147

1186914386

claude-opus-4-6

1207293145

1274323923

1338389614

140432223

1444732314

1462086697

1506258256

1514009179

1559290700

1567550242

1592612642

1609688815

1621889036

1631162196

1692956854

1696523225

17004821

1726628865

173867728

173927913

1768015773

gpt-5.5

1771795565

1863160016

1870758752

1905118106

1919353748

193274770

1960278590

1975670756

1977767562

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2144870841

2147413158

2167006968

2216482092

2243824526

2250401860

225169335

2256326107

2320791503

2351366352

2355632600

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

2401116685

2401437500

2486364096

gpt-4o

gpt-5-mini

gpt-4o-mini

2493307210

2546957535

2556595834

2624148589

2639613659

265457401

2717840929

2749253609

2789269995

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

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

3238278814

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3417108561

3452464914

3458155273

gemini-3.6-flash

3497785011

3590523401

3591394191

3594629977

3661799733

3669004489

Best Glass Websites | Free Examples & Designs

Discover Glass websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Glass websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Glass websites
built by the Webflow community