How to make a simple cloud in CSS

Creating a cloud in CSS is one of those classic exercises that, besides looking great visually, helps you understand key concepts like pseudo-elements, positioning, and organic shapes with border-radius.
In this tutorial, I'm going to teach you how to create a simple CSS cloud using only HTML and CSS, without images, without SVG, and without external libraries.

The idea is clear: a decorative cloud, easy to reuse and perfect for practice.

In this article, we will see how to create a simple cloud in CSS; the cloud will be composed of a div, and inside it will have a span to represent a shadow generated by it:

<div id = "cloud"><span class='shadow'></span></div>

Exactly what we are going to build

Before we start, let me clarify something important. When I tested different techniques for making clouds, I realized it doesn't always make sense to use SVG or complex animations. If you only need a decorative cloud, pure CSS is more than enough.

In this case, we are going to create:

• A cloud made with a single div
• Volume using ::before and ::after
• Shadow with box-shadow
• A light gradient to give it depth

How to achieve those characteristic bumps that clouds have with ::before and ::after?

To do this, we will use the following rules:

#cloud:after {
	width: 100px; height: 100px;
	top: -50px; left: 50px;
	border-radius: 100px;
}
#cloud:before {
	width: 200px; height: 200px;
	top: -90px; right: 50px;
	border-radius: 200px;
}

We will create a couple of round bumps; but for the CSS attributes top and right to take effect, it is necessary for the element to have positioning: relative, absolute, or fixed:

#cloud:after, #cloud:before {
	content: '';
	position: absolute;
	background: #FFF;
	z-index: -1
}

We position it with position: absolute and indicate a z-index of -1 so that the internal edges are not visible; otherwise, the cloud would be displayed as follows:

The CSS for the cloud is very simple:

#cloud {
	width: 350px; height: 120px;
	background: #BFF;
	background: linear-gradient(top, #BFF 5%, #DFF 100%);
	top: 50px; left: 50px;
	border-radius: 100px;
	position: absolute;
	margin: 120px auto 20px;
}

Here are several important details:

• The large border-radius is what gives us the base shape
• The gradient adds a bit of volume
• Positioning is mandatory, and this is something I learned through trial and error: if you don't position the container, the pseudo-elements won't align correctly later

This mistake is one of the most common when someone tries to create a CSS cloud for the first time.

Why position is so important in a CSS cloud

This point deserves emphasis. For top, left, or right to work, the element must have a defined positioning:

• relative
• absolute
• fixed

If you don't do it, the pseudo-elements will be placed relative to the document, not the container, and the cloud completely falls apart. It's a very typical error when starting with ::before and ::after.

Applying the gradient to the cloud

We apply a gradient using prefixes to achieve compatibility between modern browsers and the background attribute in case the user has an older version of the browser or it simply doesn't support gradients; the presence of the position attribute is very important whether the positioning is relative, absolute, or fixed; and this is so that the bumps are aligned with the container; otherwise, this would be the result:

Finally, the shadow:

.shadow {
	width: 350px;
	position: absolute; bottom: -10px; 
	background: #000;
	z-index: -1;
	box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	border-radius: 50%;
}

Here the box-shadow does almost all the work. There's no need to make it more complicated if you're just looking for a simple CSS cloud.

Final result and recommendations

With all this, you now have a cloud created entirely with CSS, without images or SVG. It is a lightweight solution, easy to adapt, and perfect for small projects or as a learning exercise.

When I started practicing these types of shapes, it helped me a lot to later try:

• Changing colors
• Adjusting sizes
• Creating several clouds by reusing the same class
• Combining it with other CSS shapes (circles, trapezoids, etc.)

Frequently asked questions about creating clouds in CSS

• Can you create a cloud in CSS without images?
  • Yes, perfectly. With div, border-radius, pseudo-elements, and shadows, you can create very attractive clouds.
• Is it better to use CSS or SVG for a cloud?
  • It depends on the case. For something decorative and simple, CSS is faster. SVG makes sense if you are looking for realistic or animated clouds.
• What are ::before and ::after for in this example?
  • They are used to create the upper bumps of the cloud without adding more HTML.
• Why does my CSS cloud look bad?
  • Usually, it's because of:
  • Not using position
  • Not adjusting the z-index
  • Edges too small in border-radius

Conclusion

Creating a cloud in CSS is a perfect exercise to improve your understanding of positioning, pseudo-elements, and shadows. With a simple structure and a few well-understood rules, you can achieve very visual results without relying on external images.

If you keep practicing these types of examples, creating more complex shapes with CSS will become increasingly natural.

Next step, keep practicing by creating shapes with CSS and HTML, creating circles, squares, trapezoids, and other shapes.