# Formas con degradado: blobs, orbes y esferas que parecen reales

[Canonical HTML page](https://gradiently.design/es/guide/gradient-shapes)

Un blob con un degradado encima es fácil. Un blob que parece tener peso, iluminado en un espacio, es otra cosa. La diferencia está en cinco pequeñas decisiones sobre de dónde viene la luz.

## The short version

- Las formas con degradado parecen tridimensionales cuando todas las formas del diseño están sombreadas desde la misma fuente de luz imaginaria.
- Una esfera convincente tiene cinco zonas: un brillo, un lado iluminado, una sombra propia, una banda de luz reflejada cerca del borde y una sombra proyectada debajo.
- En CSS, una esfera es un elemento circular con un degradado radial cuyo centro se desplaza hacia la luz, por ejemplo `circle at 30% 30%`.
- Los blobs y las formas orgánicas pueden hacerse con valores desiguales de `border-radius` y sombrearse con el mismo degradado radial que una esfera.
- Las sombras deben ser una versión más oscura y fría del propio color de la forma, no gris ni negro.

Las **formas con degradado** son blobs, orbes, esferas y píldoras rellenas de una mezcla que las hace parecer iluminadas, como si tuvieran volumen. Parecen reales cuando el sombreado sigue una sola fuente de luz: un brillo intenso en el lado que mira a la luz, una sombra propia más oscura en el lado opuesto, un tenue borde de luz reflejada justo en el contorno y una sombra suave en el suelo. Si te saltas alguna, la forma se lee como una pegatina plana con un degradado. Si las haces bien, dos colores bastan para sugerir un objeto sólido.

## Cómo cae la luz sobre una forma redonda

Los pintores lo llevan describiendo siglos, y se aplica a cualquier forma redonda que dibujes. Elige la dirección de la luz antes que el color y luego sombrea cada zona en orden. Arriba a la izquierda es la convención porque es lo que el lector espera, pero cualquier dirección funciona si eres coherente.

| Zona | Dónde está | Color |
| --- | --- | --- |
| Brillo | El punto más cercano a la luz | Casi blanco, teñido con el color de la luz |
| Lado iluminado | La mitad que mira a la luz | El color real de la forma, en su punto más brillante |
| Sombra propia | Donde la superficie se aleja de la luz | La banda más oscura, algo más fría |
| Luz reflejada | Un borde fino en el contorno en sombra | Algo más clara que la sombra propia |
| Sombra proyectada | Sobre la superficie de debajo | Suave, oscura, más oscura donde toca |

Las cinco zonas de una esfera iluminada. El borde reflejado es el que más se olvida, y el que vende la redondez.

## Recetas de sombreado para copiar

Estas muestras son estudios de iluminación: el sombreado que pondrías dentro de un círculo, un cilindro o un cono. Todas están iluminadas desde arriba a la izquierda. Aplícalas a una forma con esquinas redondeadas y se convierten en objetos sólidos.

- Sombreado de esfera, violeta: `radial-gradient(circle at 30% 28%, #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%)`
- Sombreado de esfera, ámbar: `radial-gradient(circle at 32% 30%, #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%)`
- Sombreado de cilindro, turquesa: `linear-gradient(90deg, #134e4a 0%, #2dd4bf 22%, #ccfbf1 32%, #14b8a6 50%, #0f3d3a 85%, #115e59 100%)`
- Sombreado de cono, índigo: `conic-gradient(from 200deg at 50% 50%, #1e1b4b, #a5b4fc, #eef2ff, #6366f1, #1e1b4b)`

Fíjate en el ligero repunte al final de cada esfera y cilindro: es la luz reflejada en el borde en sombra.

Las recetas de esfera terminan en un color algo más claro que el anterior. Esa última parada es el borde reflejado, colocado justo dentro del contorno del círculo para que sobreviva al recorte. Sin él, el borde de la forma queda muerto y parece un agujero en lugar de una bola. La guía de [degradados radiales](https://gradiently.design/es/guide/radial-gradient) explica cómo la posición del centro y el tamaño cambian la caída.

## Cómo hacer una esfera con degradado en CSS

Convierte el elemento en un círculo con `border-radius: 50%` y desplaza el centro del degradado hacia la luz. El círculo recorta el degradado, así que el brillo queda descentrado dentro de una forma perfectamente redonda. Una elipse desenfocada y aplastada debajo hace de sombra proyectada.

```css
.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}
```

Una esfera violeta con una sombra proyectada suave y un blob ámbar hecho con ocho valores desiguales de border radius.

> **Blobs que respiran** Anima los ocho valores de `border-radius` entre dos conjuntos durante 8 a 12 segundos con entrada y salida suaves. La forma se ondula despacio mientras su iluminación se queda quieta, lo que la mantiene creíble. Respeta los ajustes de [movimiento reducido](https://gradiently.design/es/guide/reduced-motion).

## Blobs, píldoras y formas orgánicas

Los blobs se leen como amables y suaves, por eso son populares en marcas de bienestar, comida, infancia y creatividad. Siguen las mismas reglas de iluminación que una esfera, pero sus abultamientos captan brillos en más de un sitio. Mantén un brillo principal y deja los demás tenues. Hay más sobre el estilo en [formas orgánicas en diseño](https://gradiently.design/es/guide/organic-shapes-design).

- **Píldora:** un rectángulo redondeado sombreado como un cilindro, con la luz recorriendo su longitud.
- **Guijarro:** una esfera aplastada, con un brillo amplio y de poco contraste, como piedra mate.
- **Gota:** una esfera con un brillo intenso y nítido y un fuerte borde reflejado, que se lee como brillante.
- **Blob nube:** círculos solapados con un único brillo compartido, para que se lean como una sola forma.

## Por qué las formas con degradado parecen planas y cómo arreglarlo

### Parece plana

- Brillo en el centro exacto, como iluminada desde el espectador
- Cada forma iluminada desde un lado distinto
- Sombras grises o negras
- Borde duro entre la luz y la sombra
- Sin sombra proyectada, así que las formas flotan

### Parece sólida

- Brillo desplazado hacia una fuente de luz
- Todas las formas comparten la misma luz
- Sombras de un tono más profundo y frío del color
- Un giro largo y gradual hacia la sombra propia
- Una sombra suave ancla cada forma a una superficie

La temperatura de color hace gran parte del trabajo. La luz cálida da sombras frías y la luz fría da sombras cálidas. Una esfera violeta con un brillo ligeramente rosado y una sombra propia violeta azulada parece mucho más real que una que simplemente va de violeta claro a violeta oscuro. [Colores cálidos y fríos](https://gradiently.design/es/guide/warm-and-cool-colors) explica la combinación.

## Cómo usar formas con degradado en una composición

1. **Elige una sola fuente de luz** Anótala: arriba a la izquierda, cálida. Todas las formas, sombras y brillos la siguen.
2. **Usa tres tamaños** Una forma grande, una mediana y una pequeña se leen como profundidad. Cinco blobs iguales se leen como confeti.
3. **Deja que las formas salgan del encuadre** Recortar la forma más grande en un borde hace que el lienzo parezca más grande que sus límites.
4. **Guarda una zona tranquila para el texto** Las formas son recargadas. Ponlas alrededor del titular, nunca detrás.
5. **Añade grano** Una capa de ruido fino hace que el sombreado digital liso parezca impreso y oculta las bandas. Consulta [degradados con grano](https://gradiently.design/es/guide/grainy-gradients).

Un post vertical de producto que anuncia nuevos sabores de helado con formas degradadas suaves y redondeadas alrededor del titular

Un post de producto a 1080×1350. Formas redondeadas e iluminadas alrededor de las palabras, con el titular sobre un fondo tranquilo.

Si prefieres no sombrear formas a mano, los Marks de Gradiently son fondos vivos construidos con materiales, luz y grano superpuestos, y se renderizan limpios a cualquier tamaño en el que diseñes. Para una sola esfera luminosa usada como imagen principal, consulta [orbes de degradado](https://gradiently.design/es/guide/gradient-orb).

## FAQ

### ¿Cómo hago que una forma con degradado parezca 3D?

Sombréala desde una sola fuente de luz: un brillo en el lado iluminado, una sombra propia más oscura en el lado opuesto, un borde algo más claro en el contorno en sombra y una sombra proyectada suave debajo.

### ¿Cómo se hace una esfera con un degradado CSS?

Da a un elemento `border-radius: 50%` y un `radial-gradient(circle at 30% 30%, ...)` que vaya de casi blanco al color principal y a un tono oscuro. Desplazar el centro hacia la luz descentra el brillo.

### ¿Cómo hago una forma de blob en CSS?

Usa ocho valores desiguales de `border-radius`, como `62% 38% 46% 54% / 55% 42% 58% 45%`, y rellénala con un degradado radial.

### ¿De qué color debe ser la sombra de una forma con degradado?

Una versión más oscura y algo más fría del propio color de la forma. Las sombras grises o negras hacen que las formas de color parezcan sucias.