Collection of free CSS cube code examples from Codepen, GitHub, and other resources. Update of April 2021 collection. Seventeen new items.

Related Articles

  1. jQuery Cubes

Author

  • ikthreeo

Made with

  • HTML / CSS

About a code

CSS Only Interactive Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Greg Vissing

Made with

  • HTML / CSS (SCSS)

About a code

CSS Only Cubes Hover Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS Only 3D Cube Image Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Only CSS: Noisy Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS 3D Morph Cube ➜ Cubocta ➜ Octa

What's going on here: start with a cube, truncate to get a truncated cube, rectify to get a cuboctahedron, reverse rectify to get a truncated octahedron, reverse truncation to get an octahedron. The tiny edge gaps between the faces are intentional in order to see through to the darker faces in the back. The octahedron is the dual of the cube and the other way around.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

What Got You so Jumpy?

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Bubbly #5. Pure CSS 3D

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Cubes

Author

  • Tanner Dolby

Made with

  • HTML / CSS (SCSS)

About a code

CSS Cubes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Cube of Cubes

Author

  • Sacha Van den Wyngaert

Made with

  • HTML / CSS (SCSS)

About a code

CSS Cube of Cubes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Carlos

Made with

  • HTML / CSS / JS

About a code

CSS Magik Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Shaw

Made with

  • HTML / CSS (SCSS)

About a code

Cubed Prism

CSS only cubed prism.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • radnerus

Made with

  • HTML / CSS (SCSS)

About a code

Cube - Radnerus

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lynn Fisher

Made with

  • HTML / CSS (Stylus)

About a code

Single Div CSS Sinking Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Madalena

Made with

  • HTML / CSS

About a code

Showbox 3D Video Rotating Cube

Showcasing a rotating 3D cube covered with videos for signup page of a fictional streaming movies service.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mariana

Made with

  • HTML / CSS (SCSS)

About a code

Big Cubes Animation with SVG <use> and CSS Variables

SVG cube reusing content with SVG, animation and CSS variables.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lili Z

Made with

  • HTML / CSS (PostCSS)

About a code

Pure CSS 3D Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS 3D Practice Goal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • leusrox

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mykal Machon

Made with

  • HTML / CSS

About a code

Tessaracted Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • David Khourshid

Made with

  • HTML / CSS (SCSS)

About a code

CSS-Only Cube Pack

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Emmanuel Lainas

Made with

  • HTML / CSS (SCSS)

About a code

Levitating Webpack 3 Logo

Webpack's 3 awesome logo animation.. with a bit of a shadow and a levitating effect added.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ben Sheppard

Made with

  • HTML (Haml) / CSS (Less)

About a code

Spinning 3D Cube

Pure CSS spinning 3D cube.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS 3D Cube Assembly Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Keith Clark

Made with

  • CSS (SCSS)

About a code

Zero Element: Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Pure CSS Shaded Cube Wheels

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kyle Shanks

Made with

  • HTML (Slim) / CSS (Stylus)

About a code

New Cube Thingy

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

Cube

Pure CSS animated cube.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • David Verlangieri

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Waving Cubes #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nikhil Krishnan

Made with

  • HTML / CSS (SCSS)

About a code

Cube Flipping Loader

CSS simple cube flip loading animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • David Verlangieri

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Waving Cubes #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Bali Balo

Made with

  • HTML / CSS (SCSS)

About a code

Cubic Triforce

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Bali Balo

Made with

  • HTML / CSS (SCSS)

About a code

Inside

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Bali Balo

Made with

  • HTML / CSS (SCSS)

About a code

Face Expansion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Bali Balo

Made with

  • HTML / CSS (SCSS)

About a code

Zargun

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Fruit Cubes

Author

  • Ana Tudor

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

CSS Fruit Cubes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Matthijs Kuiper

Made with

  • HTML / CSS (SCSS)

About a code

Isometric Cubes With HTML, CSS And SVG

Animated loading indicator with isometric cubes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mauricio Allende

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Trying to Recreate the Gamecube Opening with CSS

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Hugo DarbyBrown

Made with

  • HTML / CSS (SCSS)

About a code

80s Retro Spinning Cube

Keeping on the 80s retro vibe.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • rafaelcastrocouto

Made with

  • HTML / CSS

About a code

Pure CSS Dice

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kushagra Gour

Made with

  • HTML / CSS (SCSS)

About a code

3D Cube Image Gallery

An image gallery in form of a 3D cube. The demo uses CSS3 3D and animation properties to create a nice animated cube.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -