Create 3D Clouds in CSS

3D Sotrm Clouds
3D Sotrm Clouds

Hey! You might want to try out Smartmockups app, an easy to use tool to design good photo and mockups without using Photoshop complex interface.
*** Remember to Use CL Design Coupon Code to claim your discount !
Coupon Code : CRAZYLEAF10

This tutorial will show you how to use 3D transforms in CSS to create sprite-based realistic 3D clouds. More information on 3D transforms can be found here.

The example can be customized using different types of textures and adjusting them on four levels. Using these you can obtain normal white 3D clouds, dark gray storm clouds and dark lighting storm ones.

Texture levels

3D Clouds Texture Levels

Normal clouds preview

3D Clouds

Storm clouds preview

3D Sotrm Clouds

Lighting Storm clouds preview

3D Lighting Storm Clouds


A fully functional demo of the CSS3 3D clouds can he found here.


You can view the 3D clouds tutorial here.

Follow us on Twitter @crazyleaf.

Leave a Reply

Your email address will not be published. Required fields are marked *


Twitter Lounge

Top 10 Custom Interior Design Wallpapers

pixelglyph icon set

PixelGlyph Professional Icons Giveaway Winners