Cómo hacer una simple nube en CSS

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

En este artículo veremos como crear una simple nube en CSS; la nube estará compuesta de un div, dentro tendrá un span para representar una sombra generada por la misma:

<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, 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 para darle profundidad

¿Cómo lograr estos bultos característicos que tienen las nubes con ::before y ::after?

Para ello emplearemos las siguientes reglas:

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

Crearemos un par de bultos redondos; pero para que los atributos CSS top y right tengan efecto, es necesario que el elemento tenga un posicionamiento, relativo (relative), absoluto (absolute) o fijo (fixed):

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

Lo posicionamos con position: absolute e indicamos un z-index en -1 para que no se vean los bordes internos, de otra forma, la nube se visualizaria de la siguiente manera:

El CSS para 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
• El degradado aporta un poco de volumen
• El position es obligatorio, y esto es algo que aprendí a base de prueba y error: si no posicionas el contenedor, luego los pseudoelementos no se alinean correctamente

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, el elemento debe tener un posicionamiento definido:

• relative
• absolute
• fixed

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

Aplicando el degradado en la nube

Le aplicamos un degradado empleando los prefijos para lograr la compatibilidad entre los navegadores modernos y el atributo background por si el usuario posee una versión anterior del navegador o este simplemente no soporta degradados; es muy importante la presencia del atributo position ya sea que el posicionamiento sea relativo (relative), absoluto (absolute) o fijo (fixed); y esto es para que los bultos estén alineados con el contenedor; de otra forma este sería el resultado:

Por último, la sombra:

.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í el box-shadow hace casi todo el trabajo. No hace falta complicarse más si solo buscas una nube CSS sencilla.

Resultado final y recomendaciones

Con todo esto ya tienes una nube creada completamente con CSS, 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.

Cuando yo empecé a practicar este tipo de formas, me ayudó mucho intentar luego:

• Cambiar colores
• Ajustar tamaños
• Crear varias nubes reutilizando la misma clase
• Combinarlo con otras formas CSS (círculos, trapecios, etc.)

Preguntas frecuentes sobre crear nubes en CSS

• ¿Se puede crear una nube en CSS sin imágenes?
  • Sí, perfectamente. Con div, border-radius, pseudoelementos y sombras puedes crear nubes muy resultonas.
• ¿Es mejor usar CSS o SVG para una nube?
  • Depende del caso. Para algo decorativo y simple, CSS es más rápido. SVG tiene sentido si buscas nubes realistas o animadas.
• ¿Para qué sirven ::before y ::after en este ejemplo?
  • Se usan para crear los bultos superiores de la nube sin añadir más HTML.
• ¿Por qué mi nube CSS se ve mal?
  • Normalmente es por:
  • No usar position
  • No ajustar el z-index
  • Bordes demasiado pequeños en border-radius

Conclusión

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

Si sigues practicando este tipo de ejemplos, crear formas más complejas con CSS será cada vez más natural.

Siguiente paso, sigue practicando creando formas con CSS y HTML, creando una círculos, cuadrados, trapecios y otras formas.