La versión corta
- 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.
En esta página
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.
radial-gradient(#fef3c7, #f59e0b 45%, #78350f)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. Para el lado de diseño de las mezclas radiales, mira la guía complementaria sobre degradados radiales.
La sintaxis de radial-gradient()
/* 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)| 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 |
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() 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.
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%.
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.
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.
.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%);
}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.
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 tiene más.
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
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
