Collection of free HTML and CSS 3D code examples from Codepen and other resources.

Demo image: Spirited Away Bathhouse - 3D CSS

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Spirited Away Bathhouse - 3D CSS

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

Responsive: yes

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

The Gift of CSS

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

Responsive: yes

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Extra Touches

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

Responsive: yes

Dependencies: -

Demo image: 150ml of vanilla CSS

Author

  • Paulo Nunes

Made with

  • HTML (Pug) / CSS

About a code

150ml of vanilla CSS

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

Responsive: yes

Dependencies: -

Demo image: 3D Ice Cream Parlor in CSS

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

About a code

3D Ice Cream Parlor in CSS

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

Responsive: yes

Dependencies: -

Demo image: CSS in 3D in CSS

Author

  • Amit Sheen

Made with

  • HTML / CSS (SCSS)

About a code

CSS in 3D in CSS

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

Responsive: no

Dependencies: -

Demo image: Bubbly

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Bubbly

Pure CSS 3D bubbles.

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

Responsive: no

Dependencies: -

Demo image: 3D iMac - CSS Only

Author

  • Adir

Made with

  • HTML / CSS

About a code

3D iMac - CSS Only

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

Responsive: yes

Dependencies: -

Demo image: Great Pyramid of Giza - 3D Model - Pure CSS

Author

  • Josetxu

Made with

  • HTML / CSS

About a code

Great Pyramid of Giza - 3D Model - Pure CSS

3D model of the Egyptian Great Pyramid of Cheops in Giza. Discovering the possibilities of 3D modeling with CSS.

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

Responsive: yes

Dependencies: -

Author

  • Adam Argyle

Made with

  • HTML / CSS (PostCSS)

About a code

Explode A Node: 3D Box Model

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS 3D Shaded Rotating Golden

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS 3D Shaded Rotating Golden

Make your own by changing vars on 1st line of Pug.

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

Responsive: no

Dependencies: -

Demo image: CSS 3D Guitar with 5 Texture Variation

Author

  • S. Shahriar

Made with

  • HTML / CSS / JS

About a code

CSS 3D Guitar with 5 Texture Variation

CSS 3D Guitar is a guitar model, made possible using mask-image, background-image and transform properties. The design is created with <div> elements and is completely customizable through CSS Variables. Camera simulation and Control panel synchronization powered by a few lines of JavaScript.

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

Responsive: yes

Dependencies: -

Demo image: 3D Room - Pure CSS

Author

  • Ricardo Oliva Alonso

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

3D Room - Pure CSS

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

Responsive: yes

Dependencies: -

Demo image: 3D Modern House - Pure CSS

Author

  • Ricardo Oliva Alonso

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

3D Modern House - Pure CSS

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

Responsive: yes

Dependencies: -

Demo image: CSS Cab

Author

  • Ricardo Oliva Alonso

Made with

  • HTML / CSS (SCSS)

About a code

CSS Cab

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

Responsive: yes

Dependencies: -

Demo image: 3D Printer

Author

  • Ricardo Oliva Alonso

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

3D Printer

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

Responsive: yes

Dependencies: -

Demo image: CasioPT-1.css

Author

  • Sarah Fossheim

Made with

  • HTML / CSS

About a code

CasioPT-1.css

Vintage Casio PT-1 keyboard drawn entirely with HTML and CSS; using divs, gradients and box-shadows.

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

Responsive: no

Dependencies: -

Demo image: Town

Author

  • Ricardo Oliva Alonso

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Town

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

Responsive: yes

Dependencies: -

Demo image: 3D Cube (CSS3 Transform)

Author

  • Vishal

Made with

  • HTML / CSS (SCSS)

About a code

3D Cube (CSS3 Transform)

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

Responsive: no

Dependencies: -

Author

  • Jouan Marcel

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Skeuomorphic Buttons

Skeuomorphic buttons with realistic 3D effect. Skeuomorphism was used on the earlier iPhones and was made popular by it as well for UI design. It got mostly deprecated by flat design, as skeuomorphic elements are harder to create, maintain and scale across different platforms.

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

Responsive: no

Dependencies: -

Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

About a code

3D Hover Effect

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

Responsive: no

Dependencies: -

Demo image: Pure CSS 3D

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS 3D

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

Responsive: yes

Dependencies: -

Demo image: 3D CSS Cube

Author

  • Edwin Chen

Made with

  • HTML / CSS

About a code

3D CSS Cube

CSS-Only 3D perspective cube using CSS path-clip.

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

Responsive: no

Dependencies: -

Demo image: Clip-Path 3D

Author

  • ycw

Made with

  • HTML (Pug) / CSS

About a code

Clip-Path 3D

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

Responsive: yes

Dependencies: -

Demo image: 3D HUD in Space - Pure CSS

Author

  • Pieter Biesemans

Made with

  • HTML / CSS (SCSS)

About a code

3D HUD in Space - Pure CSS

A fun little experiment to create a HUD (head-up display) in pure CSS and animate it without using any JavaScript. Move your mouse to have the HUD follow. When removing the mouse it will default back to the top left position.

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Isometric Towers

Author

  • Henry Desroches

Made with

  • HTML (HTML) / CSS (SCSS)

About a code

Pure CSS Isometric Towers

Some sweet 3D transforms on some cute purple divs.

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

Responsive: no

Dependencies: -

Author

  • Hamada Fayyad

Made with

  • HTML / CSS

About a code

CSS3 Timeline With 3D Effect

CSS3 gradient timeline with 3D effect when you hover div.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Miguel Ambrosi

Made with

  • HTML / CSS

About a code

Animated Anaglyph 3D Effect with CSS

Geometric shapes being animated in intervals with an anaglyph 3D effect using just CSS.

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

Responsive: no

Dependencies: -

Demo image: Inifnite Corridor

Author

  • Artur Kot

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Inifnite Corridor

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

Responsive: yes

Dependencies: -