X

CSS3D Clouds

An experiment on creating volumetric 3d-like clouds with CSS3 3D Transforms and a bit of Javascript.

Check out the tutorial here!

Move the mouse to rotate around and mouse wheel to zoom in and out. Hit space to generate a new cloud. Works on Firefox (faster if Nightly), Chrome and Safari.

Generate clouds Show texture controls Fullscreen

Texture list

Select one or more textures to create clouds. The more the merrier!

white cloud
None A few Some A lot
dark cloud
None A few Some A lot
smoke cloud
None A few Some A lot
explosion
None A few Some A lot
explosion 2
None A few Some A lot
box
None A few Some A lot

Presets

Clouds Storm Boom Michael Bay

Credits

Coded by Jaume Sánchez (@thespite)

Inspired on Mr.doob's WebGL clouds and
Mark J. Harris' Real-Time Cloud Rendering for Games.

Fonts Open Sans and Lato are from Google Web Fonts.
Textures are property of their respective owners.