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

Dhruv Sachdev

I loved Dries Bos's portfolio (http://driesbos.com), so I gave rebuilding it in Webflow a shot!

This minimal portfolio features a cubic, 90's retro look. Each block reveals a preview when you hover over. The blocks are stackable, making it easy to add or remove items.

I've implemented a custom cursor. I've written Javascript to remove in-line styles added by Webflow interactions to avoid clashes once the page load animation is completed.

90's Retro Style Portfolio

This simple section with a 3-D cube can be customised with images or videos, making for an interesting features section. Feel free to stack effects on top of this!

The 3-D cube rotation is achieved through Webflow interactions and transforms.

3-D Cube for Features

WebDev For You

Welcome to daily interaction #92!

I love 3d-effects! This one was a lot of fun. It’s just a simple 3d box that rotates in the center of the viewport as the user moves their mouse around. It took me a moment to get the 3d box to rotate from the center until I applied a color to the cube wrapper and saw that the cube was sitting on top of the wrapper rather than in the center. So I moved each side of the box forwards 50px since each side is 100px by 100px. This placed each side in the center of the wrapper so when the wrapper rotates the cube rotates from the center :D. I moved each side forward 50px on the z-index. I could have placed the sides in another wrapper and moved that wrapper forwards 50px on the z-axis, but I thought moving each side forward would allow for more creativity afterwards :). I also left all the sides grey. I had many ideas for different colors, text, or images that could be placed on each side, but I wanted to focus more on the actual animation.

WebDev For You - Daily Interaction #92

JP Dionisio

Are you having a hard time making Three.js work on your website? 

This cloneable shows you how to use Three.js in Webflow so that you can start your journey in learning and building with Three.js in Webflow

A starter template to use Three.js in your Webflow project.

Feel free to clone and enjoy! :)

Three.js Template

Alan Linush

3D animation of a rotating cube with different pictures and titles in front. Portfolio concept

UPDATE: Now optimized for mobile.

Portfolio Cube

Francesco Castronuovo

Hi my gorgeous friends of Webflow,

This cloneable was built from a Jacob Foster's project:

https://codepen.io/Alca/pen/GRyBJZX

I tweaked the code a bit to make it fully responsive and directly configurabile from your Webflow project by using attributes. 😊

Things you can customize through attributes:

- Particle color (HSL format)
- Scale factor for desktop/tablet and mobile, for better responsiveness
- Particle density
- Cube perspective
- Particle spread
- Particle velocity

Just add the corresponding attributes to the div you want to host your canvas animation in and play around with attribute values! 😁

Look for the 'hero-section__canvas-host' element inside my project to get the whole list from the Element Settings panel and don't forget to add the 'fc-canvas-host' attribute as well!

Enjoy, clone, and feel free to leave a comment!

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Animated Cube Particles With Canvas

Master Flowmaker

3D cube

056 - 100 days of @webflow interactions

#56 3D cube

In this lesson of the Mastering GSAP Interactions in Webflow series, we’re building a fully CMS-powered 3D cube gallery that rotates, moves, and synchronizes with scroll-driven image and text transitions.

Using GSAP Interactions, Webflow CMS, custom attributes, and a small amount of dynamic CSS, we’ll create an immersive scrolling experience where background images, staggered text animations, and a rotating 3D cube work together as a single animation system.

And the coolest part?

Every face of the cube is generated directly from CMS content.

By combining CMS fields with 3D transforms, we’ll dynamically control the position, rotation, and transform origin of each cube face, allowing the entire structure to be managed directly from the CMS.

👉 Watch on YouTube: https://youtu.be/9MJsvdA37p8

👉 GSAP Knowledge Base: https://francescocastronuovo.com/kb/gsap-webflow/

Mastering GSAP Interactions in Webflow: Build a Rotating Cubic Gallery on Scroll

Zeltac Dev

Cube Slider - A slider built with Zeltac Slider having the cube effect. 

Both Horizontal and vertical sliders available.

How to use this in your project:
1. Clone this, Copy and paste the Slider section into your project.
2. Install and open Zeltac Slider from the Apps (E) pane.
3. In Zeltac Slider edit the copied slider and click "Apply to page".
Done. Publish.

Cube Effect Slider - Horizontal & Vertical

Mees Euwijk

Website created for Build2Connect. An IT-specialist based in the Netherlands.

IT is often seen as something really complicated and scary. Build2connect wants to change this by being clear and simple. This is where our playful website comes in. Making IT fun with dynamic elements which respond to your clicks. While delivering a message to 'dump' your IT-struggles at Build2Connect. Build2connect collects them, analyzes them, and sorts them out. Building and connecting your IT!

Build2connect | IT-specialist

Rezaul Karim

A cute, responsive Webflow template perfect for portfolios, landing pages, or personal sites. Lightweight, fully customizable, and free to clone and use.

Cube Design Free cloenable

Maira Ritter Cruz

RBGV Advogados

Supasaito

In this lesson of the Mastering GSAP Interactions in Webflow series, we’re building a fully CMS-powered 3D cube gallery that rotates, moves, and synchronizes with scroll-driven image and text transitions.

Using GSAP Interactions, Webflow CMS, custom attributes, and a small amount of dynamic CSS, we’ll create an immersive scrolling experience where background images, staggered text animations, and a rotating 3D cube work together as a single animation system.

And the coolest part?

Every face of the cube is generated directly from CMS content.

By combining CMS fields with 3D transforms, we’ll dynamically control the position, rotation, and transform origin of each cube face, allowing the entire structure to be managed directly from the CMS.

👉 Watch on YouTube: https://youtu.be/9MJsvdA37p8

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

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

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

3452464914

3458155273

gemini-3.8-flash

3497785011

3590523401

3591394191

3594629977

3620665002

3661799733

3669004489

3673080560

Best Cube Websites | Free Examples & Designs

Discover Cube websites
built by the Webflow community

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

Discover Cube websites built by the Webflow community

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

Discover Cube websites
built by the Webflow community