# Degradado radial en CSS: formas, tamaños y posiciones

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

radial-gradient() dibuja el color hacia fuera desde un punto. Aquí tienes cada una de sus partes, con ejemplos en vivo y los trucos de capas detrás de los brillos suaves, los focos y las viñetas.

## The short version

- Un degradado radial en CSS reparte el color hacia fuera desde un punto central, y se escribe con la función radial-gradient() en cualquier sitio donde CSS acepte una imagen.
- Por defecto, un degradado radial es una elipse centrada en la caja y dimensionada para llegar a la esquina más lejana.
- Las palabras clave de tamaño closest-side, closest-corner, farthest-side y farthest-corner deciden dónde cae la última parada de color.
- La palabra at mueve el centro, por ejemplo at 20% 30%, y las posiciones funcionan como background-position.
- Apilar varios degradados radiales que se desvanecen hasta transparente es la forma habitual de construir brillos suaves y fondos tipo malla en CSS.

Un **degradado radial en CSS** mezcla el color hacia fuera desde un punto, como la luz que se extiende desde una lámpara. Se escribe con `radial-gradient()` y se usa donde CSS acepta una imagen, normalmente `background-image`. Sin opciones dibuja una elipse en el centro de la caja que llega hasta la esquina más lejana: `radial-gradient(#fef3c7, #b45309)` da un centro pálido que brilla hacia un ámbar profundo.

Brillo ámbar, todo por defecto: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

Una elipse, centrada y dimensionada hasta la esquina más lejana. Eso es lo que obtienes cuando solo das los colores.

Todo lo demás en la función cambia una de tres cosas: la **forma**, el **tamaño** y la **posición**. Cuando controlas esas tres, la misma función dibuja brillos, focos, viñetas, rayos de sol y los charcos de color que hay detrás de un [degradado de malla en CSS](https://gradiently.design/es/guide/css-mesh-gradient). Para el lado de diseño de las mezclas radiales, mira la guía complementaria sobre [degradados radiales](https://gradiently.design/es/guide/radial-gradient).

## La sintaxis de radial-gradient()

```css
/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)
```

La forma y el tamaño pueden ir en cualquier orden. La posición siempre va después de la palabra at.

| Parte | Valores | Por defecto |
| --- | --- | --- |
| Forma | `circle` o `ellipse` | `ellipse` |
| Tamaño | una palabra clave, una longitud para un círculo, o dos longitudes o porcentajes para una elipse | `farthest-corner` |
| Posición | `at` seguido de cualquier valor que acepte `background-position` | `at center` |
| Interpolación | `in oklab`, `in oklch` y otros espacios de color | sRGB para colores hex |
| Paradas de color | dos o más colores con posiciones opcionales | obligatorias |

Las partes de radial-gradient(). Solo las paradas de color son obligatorias.

Una regla suele pillar a la gente por sorpresa: el tamaño de un círculo debe ser una longitud como `200px`, nunca un porcentaje, porque el porcentaje de un rectángulo no tiene un único radio. Las elipses sí aceptan porcentajes, como en `ellipse 60% 40%`. La [referencia de MDN para radial-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) recoge la gramática completa.

## Círculo o elipse

Una elipse se estira con la caja, así que en un banner ancho el brillo es ancho y en una story alta es alto. Un círculo se mantiene redondo hagas lo que hagas con la caja. Usa elipses para fondos que deben llenar su contenedor de forma uniforme, y círculos para todo lo que deba leerse como una fuente de luz, un planeta o el brillo de un botón.

- Elipse: sigue a la caja: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)`
- Círculo: se mantiene redondo: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)`

Las mismas paradas de menta a verde bosque. En un mosaico ancho, la elipse se extiende a los lados y el círculo no.

## Palabras clave de tamaño: de closest-side a farthest-corner

El tamaño decide dónde cae la última parada de color, que es donde queda la forma final del degradado. Las cuatro palabras clave miden desde el centro hasta el lado o la esquina más cercanos o más lejanos de la caja. Solo se ven distintas cuando el centro no está centrado, así que todos los ejemplos de abajo parten de `30% 40%`.

- closest-side: `radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- closest-corner: `radial-gradient(circle closest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-side: `radial-gradient(circle farthest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-corner: `radial-gradient(circle farthest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`

Un sol, cuatro tamaños. closest-side termina en el borde más cercano; farthest-corner, el valor por defecto, llega a la esquina más lejana.

En la práctica, `closest-side` va bien para formas contenidas como puntos e insignias, porque el color nunca se sale del borde más cercano. `farthest-corner` va bien para fondos, porque la mezcla cubre toda la caja. Cuando necesites un control exacto, da una longitud: `circle 180px at 50% 0` es un brillo de 180 píxeles que cuelga del borde superior.

## Colocar el centro con at

La palabra `at` sitúa el centro con los mismos valores que `background-position`: palabras clave como `at top right`, porcentajes como `at 20% 80%` o longitudes como `at 40px 60px`. El centro puede incluso quedar fuera de la caja, como en `at 50% 120%`, que da un brillo de horizonte que sube desde debajo del borde inferior.

- at top left: `radial-gradient(circle at top left, #c4b5fd, #6d28d9 45%, #1e1b4b)`
- at 50% 120%: horizonte: `radial-gradient(ellipse at 50% 120%, #fb7185, #9f1239 45%, #0f0a1e 75%)`
- at 80% 20%: `radial-gradient(circle at 80% 20%, #7dd3fc, #0369a1 35%, #082f49)`

Mover el centro cambia el ambiente más que cambiar los colores.

## Brillos radiales en capas

El patrón radial más útil es apilar varios degradados en un mismo `background-image`, cada uno desvaneciéndose hasta `transparent`, sobre un color oscuro liso. Cada capa es un charco de luz en su propio lugar. Como la primera capa se pinta encima, pon primero el brillo más intenso y más pequeño.

```css
.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}
```

Tres charcos de violeta, rosa y azul cielo sobre un fondo casi negro. Cambia una posición y toda la composición se desplaza.

Dos patrones más cubren casi todo lo que queda. Una **viñeta** oscurece los bordes: `radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55))` sobre una foto. Un **foco** sigue al puntero si le pasas su posición desde propiedades personalizadas, como `radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent)`, con unas líneas de JavaScript que fijen `--x` y `--y` en `pointermove`.

> **Los brillos suaves generan bandas con facilidad** Los desvanecidos radiales grandes y de poco contraste sobre fondos oscuros son donde antes se nota el escalonado. Una capa tenue de ruido encima lo esconde; mira [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture) y [bandas en degradados](https://gradiently.design/es/guide/gradient-banding).

## Degradados radiales repetidos

`repeating-radial-gradient()` repite sus paradas hacia fuera hasta llenar la caja, así que un par de paradas duras se convierte en anillos. Usa longitudes para las posiciones de las paradas y el ancho del anillo se mantendrá constante. Es la base de las texturas de ondas, de diana y de tipo semitono, y la guía de [patrones en CSS](https://gradiently.design/es/guide/css-patterns) tiene más.

- Anillos azul marino: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)`
- Ondas desde la esquina: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)`

Las paradas duras a longitudes fijas convierten un degradado radial en anillos.

### Evita

- Porcentajes para el tamaño de un círculo, que no son válidos
- Brillos intensos que acaban en un borde duro porque la última parada es opaca
- Centrar todos los brillos en 50% 50%
- Cinco brillos superpuestos de la misma fuerza

### Haz

- Longitudes para los círculos, porcentajes para las elipses
- Desvanece cada brillo hasta `transparent`
- Coloca los brillos descentrados, cerca de las esquinas o bajo el borde
- Un brillo dominante y uno o dos más discretos

## FAQ

### ¿Cómo hago un degradado circular en CSS?

Usa `radial-gradient(circle, color1, color2)`. Añadir `circle` mantiene la forma redonda; sin él obtienes una elipse que se estira con la caja.

### ¿Cómo muevo el centro de un degradado radial?

Añade `at` y una posición después de la forma y el tamaño, por ejemplo `radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b)`. Las posiciones funcionan como `background-position`.

### ¿Qué significa farthest-corner?

Dimensiona el degradado para que su última parada de color llegue a la esquina de la caja más alejada del centro. Es el tamaño por defecto.

### ¿Puede un degradado radial circular usar un tamaño en porcentaje?

No. Un círculo necesita una única longitud como `200px`. Las elipses pueden usar dos porcentajes, como `ellipse 60% 40%`.

### ¿Cómo hago un efecto de brillo con degradados CSS?

Apila uno o más valores `radial-gradient()` que se desvanezcan de un color semitransparente a `transparent`, sobre un `background-color` oscuro.