20 CSS Cloud Examples

A carefully curated collection of the top free HTML and CSS cloud code examples.

CSS_cloud

Title:

Easy Cloud

Author:

NANOUU

Created on:

December 08, 2021

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A minimal yet very beautiful looking CSS cloud that is animated to move left and right wwith smooth keyframes.

Title:

cloud

Author:

Chaz

Created on:

April 19, 2018

Made with:

HTML, SCSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An extraordinary looking cloud created with HTML, SCSS and JavaScript. It is designed to emulate a particle cloud effect.

Title:

Pure CSS Animated Cloud

Author:

Mark Bowley

Created on:

April 22, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A minimal yet pretty cluods created with HTML and CSS. It contains a set of clouds of varying sizes that keep moving with very smooth animations.

Title:

Untitled

Author:

Kevin Jannis

Created on:

December 11, 2013

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very beautifully designed clouds with CSS and HTML. The clouds have shadows to them that give them a 3D feel also they are created in different shapes and sizes that are animated to move from left to right

Title:

Rainy cloud

Author:

Johan Linder

Created on:

July 10, 2014

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An excellently designed cloud, created with SCSS. The cloud also comes with an up and down floating animation and emulates raining in a beautiful way..

Title:

Canvallax Demo: Parallax Sky Background

Author:

Shaw

Created on:

September 01, 2015

Made with:

HTML, CSS(Less), JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very beautiful looking CSS cloud style. It is created with HTML, CSS(LESS) and JavaScript. The clouds are designed to give an ultra-realistic look. Also it moves from right to left of the screen with a very smooth animation that imitates floating.

Title:

Sunny to Cloudy - CSS Illustration, GSAP animation

Author:

Christine

Created on:

January 30, 2019

Made with:

HTML, SCSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An unique and minimal cloud design, created with HTML, SCSS and JavaScript. The design contains a house above which clouds float and stack up with a smooth animation, the color of the sky also changes from sunny to cloudy.

Title:

Css3 Clouds Background Animation

Author:

Valentin Radulescu

Created on:

February 09, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautiful CSS cloud design. Created with various clouds of different sizes and transperancies that float from left to right over a gradient sky design.

Title:

Grumpy Clouds

Author:

Ruslan Pivovarov

Created on:

May 04, 2016

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An unique CSS cloud design where the clouds move left and right on the screen with fluid animation also the clouds light up to show thunder and animated rainfall

Title:

Clouds using CSS 3D Transforms

Author:

Jaume Sanchez

Created on:

November 28, 2013

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very unique CSS cloud design created with HTML, CSS and JavaScript. The clouds are made to look ultra real. Also the cloud rotates in 3D perspective according to the cursor postion there is also an option to zoom in or out.

Title:

Rain Cloud

Author:

Piotr F

Created on:

July 06, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very minimal and unique cloud design. The elements are made using HTML and CSS to give it an unique bicolor look with amazing rain falling and droplet animation.

Title:

Drifting Clouds

Author:

Fernando Forero

Created on:

June 08, 2015

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

Cloud designs created with only HTML and CSS. The clouds are made transparent and of a variety of sizes moving from right to left over a beautifully designed night sky.

Title:

Paper Plane Animation (CSS)

Author:

Jon Q

Created on:

May 11, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very minimal yet beautiful CSS cloud template. The clouds are designed transperant and of a variety of sizes moving from right to left along with an animated paper plane.

Title:

Earth Day & Night (Click on Image)

Author:

Karen

Created on:

December 06, 2018

Made with:

HTML, CSS, Javascript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very beautiful cloud template, created using HTML, CSS and JavaScript. The creative consists of a beautiful earth design with animated clouds around it and changes into night or day on click.

Title:

Clouds

Author:

Mathieu Lajoinie

Created on:

July 20, 2014

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A minimal and simple cloud design created with HTML(Haml) and SCSS. Two cloud designs keep moving up and down with fluid animations.

Title:

Clouds css3 transition Infinite loop

Author:

Oscar Bustos

Created on:

January 12, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A pretty cloud template created using only HTML and CSS. The clouds are designed in a variety of sizes and animated to move from right to left.

Title:

Untitled

Author:

Rahim Afshary

Created on:

March 14, 2013

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very minimal and prominent cloud design created with HTML and CSS, that displays a cloud with rain falling animation

Title:

SCSS cloud

Author:

vavik

Created on:

February 16, 2015

Made with:

HTML(Haml), SCSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

This template created with HTML(Haml) and SCSS is designed to show a dark sky with realistic storm clouds moving from right to left.

Title:

Clouds

Author:

Jeya Karthika

Created on:

May 12, 2013

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very simple cloud template design, that is created with HTML and CSS. It shows a cloud over a light blue background with faint shadow effects

Title:

Cloud Anicon

Author:

Virgil Pana

Created on:

March 13, 2015

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing CSS cloud template that is designed with HTML, CSS and JavaScript. The design emulates a cloud design that transitions between day and night with fluid animations. It also contains animated effects of lightning and rain.