Cómo crear una nube con CSS puro: CSS cloud shape paso a paso

Crear una nube en CSS es uno de esos ejercicios clásicos que, además de quedar muy bien visualmente, te ayuda a entender conceptos clave como pseudoelementos, posicionamiento y formas orgánicas con border-radius.
En este tutorial te voy a enseñar cómo crear una nube CSS sencilla usando solo HTML y CSS, sin imágenes, sin SVG y sin librerías externas.

La idea es clara: una nube decorativa, fácil de reutilizar y perfecta para practicar CSS shapes y el uso de pseudoelementos.

La estructura HTML que vamos a usar es mínima: un div con id="cloud" que actúa como el cuerpo principal de la nube, y dentro un span con clase shadow para simular la sombra proyectada sobre el suelo:

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

Qué vamos a construir exactamente

Antes de empezar, aclaro algo importante. Cuando probé distintas técnicas para hacer nubes en CSS, me di cuenta de que no siempre tiene sentido usar SVG o animaciones complejas. Si solo necesitas una nube decorativa, CSS puro es más que suficiente.

En este caso vamos a crear:

• Una nube hecha con un solo div
• Volumen usando ::before y ::after
• Sombra con box-shadow
• Un ligero degradado con linear-gradient para darle profundidad

¿Cómo lograr los bultos característicos de una nube CSS con ::before y ::after?

Los pseudoelementos ::before y ::after son la clave para conseguir esos promontorios redondeados que caracterizan a las nubes, sin añadir más elementos al HTML. Para ello aplicamos dimensiones y border-radius diferentes a cada uno, lo que nos da dos círculos de distinto tamaño que sobresalen por la parte superior del cuerpo de la nube:

#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;
}

Creamos un par de bultos redondos de distinto tamaño; pero para que las propiedades top y right tengan efecto, es necesario que el pseudoelemento tenga un posicionamiento definido. Sin él, el navegador ignora esas coordenadas por completo. Las reglas compartidas entre ambos pseudoelementos quedan así:

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

Los posicionamos con position: absolute y asignamos un z-index de -1 para que queden por detrás del cuerpo principal de la nube. Sin este valor, los bordes internos de los círculos serían visibles y la nube se vería así:

El CSS para el cuerpo principal de la nube es muy sencillo:

#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;
}

Aquí hay varios detalles importantes:

• El border-radius grande es lo que nos da la forma base ovalada
• El linear-gradient aporta un sutil efecto de volumen
• El position es obligatorio, y esto es algo que aprendí a base de prueba y error: si no posicionas el contenedor, los pseudoelementos no se alinean correctamente con él

Este fallo es uno de los más comunes cuando alguien intenta crear una nube en CSS por primera vez.

Por qué position es tan importante en una nube CSS

Este punto merece insistencia. Para que top, left o right funcionen en un pseudoelemento hijo, el elemento contenedor debe tener un posicionamiento definido. Las opciones válidas son:

• position: relative
• position: absolute
• position: fixed

Si no lo haces, los pseudoelementos se colocarán respecto al documento y no al contenedor, y la nube se desarma por completo. Es un error muy típico cuando se empieza a trabajar con ::before y ::after.

Aplicando el degradado a la nube CSS

Aplicamos el degradado con linear-gradient. Para asegurar compatibilidad con navegadores más antiguos, se declara primero el background con un color plano de respaldo y luego se sobreescribe con el gradiente. De este modo, si el navegador no soporta degradados, simplemente mostrará el color sólido definido anteriormente.

Por último, la sombra proyectada, que es la parte que maneja el span.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%;
}

Aquí box-shadow hace casi todo el trabajo. La combinación de un fondo oscuro, el desenfoque de la sombra y el border-radius: 50% genera una elipse difuminada que simula muy bien la sombra de una nube sobre el suelo. No hace falta complicarse más si solo buscas una CSS cloud sencilla.

Resultado final y recomendaciones

Con todo esto ya tienes una nube CSS creada completamente en CSS puro, sin imágenes ni SVG. Es una solución ligera, fácil de adaptar y perfecta para proyectos pequeños o como ejercicio de aprendizaje de CSS shapes.

Cuando yo empecé a practicar este tipo de formas, me ayudó mucho experimentar después con pequeñas variaciones:

• Cambiar colores para simular nubes de tormenta o nubes al atardecer
• Ajustar tamaños para crear nubes grandes y pequeñas dentro de la misma escena
• Crear varias nubes reutilizando la misma clase CSS con distintos modificadores
• Combinarlo con animaciones CSS como @keyframes para mover las nubes de forma automática

Preguntas frecuentes sobre crear nubes en CSS

• ¿Se puede crear una nube en CSS sin imágenes?
  • Sí, perfectamente. Con un div, border-radius, pseudoelementos ::before/::after y box-shadow puedes crear nubes muy resultonas sin una sola imagen.
• ¿Es mejor usar CSS o SVG para una nube?
  • Depende del caso. Para algo decorativo y simple, CSS es más rápido de implementar y más fácil de mantener. SVG tiene sentido cuando buscas nubes realistas, animaciones complejas o formas totalmente personalizadas.
• ¿Para qué sirven ::before y ::after en este ejemplo?
  • Se usan para crear los bultos superiores de la nube sin añadir más elementos al HTML. Son nodos virtuales generados por CSS que se comportan como elementos independientes.
• ¿Por qué mi nube CSS se ve mal?
  • Normalmente es por alguno de estos tres motivos:
  • No usar position en el contenedor padre
  • No ajustar correctamente el z-index de los pseudoelementos
  • Valores demasiado pequeños en border-radius que rompen la forma redondeada

Conclusión

Crear una nube en CSS es un ejercicio perfecto para mejorar tu comprensión de posicionamiento, pseudoelementos y sombras. Con una estructura HTML mínima y unas pocas reglas bien entendidas, puedes lograr resultados muy visuales sin depender de imágenes externas ni librerías.

Si sigues practicando este tipo de ejemplos, crear CSS shapes más complejas será cada vez más natural e intuitivo.

Siguiente paso, sigue practicando creando formas con CSS y HTML: círculos, cuadrados, trapecios y otras figuras geométricas.