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

Francesco Castronuovo

Learn how to recreate Webflow’s classic Neon Glow Effect — but this time, powered entirely by Variables, Modes, and Component Variants.

In this tutorial, we’ll rebuild the glowing border from Webflow’s previous website and turn it into a modular system that you can update with just one color.

You’ll learn how to:

✅ Use CSS Variables and color-mix() to generate consistent glow layers
✅ Organize and group your variables in Webflow’s Variables panel
✅ Create color modes to switch between palettes instantly
✅ Combine components and variants to control glow colors across multiple elements

Everything is done natively in Webflow — no custom code required.

🎨 Colors used in the demo:

Blue #1F51FF · Pink #FF1493 · Gold #FFC42E · Green #39FF14 · Red #FF3131

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

Neon Glow Effect — Using Variables, Modes & Component Variants

Vishal Singh

A simple and effective CRM & pipeline automation platform that can be used by people driven service organizations to supercharge their sales and service opportunities and at the same time streamline their day to day operations.

Wingmate App

Zoe Tang

Slider 3D

Mahmoud Abdelaziz

Complete Webflow Agency Website
This is a fully built Webflow agency website that integrates both custom code and native Webflow features. The site includes:

Custom particle hover animations and water drop effects for a dynamic user experience

Smooth slider animations to highlight services and testimonials

A dedicated certifications section to build trust

A portfolio showcase to feature previous work in a clean, engaging layout

.... and more

Every element was crafted to ensure both performance and aesthetic appeal, resulting in a modern, high-impact agency website.

Full Webflow Agency Website

The Opposite Agency

Use this card to send personalized event invitations to your clients / family members / anyone!

3D Animated Invite Card with CMS Personalisation & RSVP

Aurélien Desplanque

Scroll through the cards to reveal their content with smooth GSAP animations. Each card animates individually on scroll, creating an interactive and dynamic card game effect. GSAP for the title

Interactive Scroll Cards Game GSAP

Rishabh Rai

A clean and elegant hover flip card effect built entirely using Webflow interactions. Each card flips on hover to reveal more content on the back side — perfect for portfolios, team sections, or feature highlights. No custom code used, just pure Webflow magic!

Hover Flip Cards Animation

Alex Dixon

Streamline the process of finding your next student house ‑ all from one convenient app. Search for your next home with friends, easily book property viewings, and chat with landlords directly.

Housr - App & Tech Company Website

Ever wanted to toss cards across the screen like a digital magician? 🎩✨

In this tutorial, I’ll show you how to build draggable cards in Webflow using GSAP Draggable — without writing a single line of custom UI code.

We’ll walk through:

✅ A static version with Polaroid-style photo cards
✅ A CMS-powered version with project info
✅ All the Webflow structure and attributes you need
✅ A breakdown of the script (don’t worry — it’s fully commented)
✅ How to make it responsive and fun on all devices
✅ And of course… a reset button so you can play again 😎

👉 Watch on YouTube: https://youtu.be/5TlZLy65Ouk

📂 Helpful Resources:

- Lidia’s Portfolio: https://www.lidiasantoyan.com/
- GSAP Draggable: https://gsap.com/docs/v3/Plugins/Draggable/
- GSAP Easing: https://gsap.com/docs/v3/Eases/

GSAP Draggable Cards

Tahir M.

Fugu

A clean and interactive swatch card built with hover-triggered animations in Webflow. Ideal for eCommerce product previews or portfolio UI showcases. Fully responsive, smooth transitions, and 100% cloneable for your next creative project.

Hover Swatch Card Animation – Made in Webflow

A modern, interactive card with a sleek shiny hover effect, built using Webflow and custom CSS. The glossy animation gives a premium feel—ideal for portfolios, product showcases, or feature sections. Fully responsive and customizable for different use cases.

Shiny Hover Card Effect

Stevie's Workspace

Custom designed and built site for OneWorld Health with up to date statistics and volunteer trip listings from their facilities around the globe using Wized.

OneWorld Health

Robin Granqvist

This is a quite cool project card component part of my new portfolio template called Foley.

Check it out on the marketplace :)

https://webflow.com/templates/html/foley-website-template

Foley Card Component

Shakuro

Shakuro Team's Workspace

Lume is a visionary payment system blending cryptocurrencies and fiat money. With low-cost transactions, lightning-fast processing, and card support, it merges the best of banking apps and crypto wallets.  

We crafted this concept on Webflow to showcase Lume’s features with clarity and style. Key benefits—convenience, speed, and investment potential—are highlighted through sleek design, performance comparisons, and a launch timeline to spark excitement. Stunning 3D animations, created with Spline, elevate the experience.

If you use or remix this project, kindly include a credit to shakuro.com in your project or documentation.

Lume — Crypto Wallet Marketing Website

Alex Hartan

Galvaweb SRL

Free Webflow microsite for the awesome Webflow community!

Responsive on desktop, tablet, and mobile—yours to clone, tweak, and make your own.

Use it to showcase your work, play around, or kickstart your next idea.

If it’s helpful, feel free to like & follow 🙏
More experiments and resources coming soon.

P.S. It feels great to carve out time to explore Webflow again.

Hover Magic

Memberstack

The Info Grid FAQ section template organizes frequently asked questions into a clean, multi-column grid layout. It’s designed to help visitors find answers quickly while keeping your page visually balanced and easy to navigate.

AeroKit UI Faq01 Info Grid

The Grid Card feature section template presents content through a neatly structured card grid, offering a visually engaging way to highlight services, features, or details. Each card is crafted for clarity, with room for icons, headings, and concise descriptions.

AeroKit UI Feature08 Grid Card

102976941

1070795817

1122423150

1186914386

1274323923

1316201488

1316201489

140432223

1462086697

1506258256

1567550242

1592612642

1631162196

1726628865

1733785607

173927913

1771795565

1863160016

1905118106

1975670756

2025032126

2030598753

Unlock more for your business with the Agency Workspace plan

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

2032141491

2037807691

2144870841

2213518682

2216482092

2339906037

2351366352

2355632600

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

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2546957535

2789269995

285302288

2857348505

2903381045

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

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

3022611874

3023147062

3026881092

307653616

3106924665

3108168977

3112069432

3120801339

3151661775

3201643127

3243842104

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3452464914

3458155273

gpt-4.1-mini

3590523401

3591394191

3672367630

3737116140

3801251705

3844506029

3879263312

Learn best practices for collaborating with clients in Webflow.

Sell your apps on the Webflow Marketplace.

Learn about structuring seats, roles, and permissions in your Workspace

Partner with Webflow to build your business alongside 2M+ creators and developers

Request access for your team to collaborate in a client’s Workspace.

Charge your client for a Site plan directly in Webflow.

Earn more by selling templates on the Marketplace.

Start building your site with AI, a prebuilt template, or from scratch.

Add your team members to start collaborating on sites.

Watch a quick intro to what you can build in Webflow.

3913199261

3934148661

3941255684

3951600357

3956476210

3960693283

4063605209

4092855684

4103643638

4144203485

4206156914

451433404

489463363

504462606

536101258

540515386

612788821

622649767

622649768

657188092

660615456

665836192

737109165

772001133

817414265

846847440

879597835

882147072

911514507

938734410

968427424

1003029853

1045828939

1049811722

1087856901

1088396327

1093574045

1099435904

1108325183

1120744071

1131151533

1140906369

1147278396

1157311889

1157563538

1178238107

1178621510

1193740135

1197475705

1209008581

1216878544

1227154495

1229056119

1234765101

1236803103

1238404733

1250328847

1252912346

1259889605

1291427916

1292405251

1297066426

130043074

1306352991

1312703771

1322655470

1323044307

Best Card Websites | Free Examples & Designs

Discover Card websites
built by the Webflow community

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

Discover Card websites built by the Webflow community

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

Discover Card websites
built by the Webflow community