La versión corta
- Las paradas de color de un degradado son los puntos en los que se alcanza un color concreto, escritos como un color seguido de una posición, por ejemplo
#7c3aed 40%. - Las paradas sin posición se reparten por igual, lo que rara vez es la opción de aspecto más natural.
- Una pista de color es un porcentaje suelto entre dos paradas que mueve el punto medio de su mezcla sin añadir ningún color.
- Dos paradas en la misma posición crean un borde duro, que es como se hacen rayas y bandas nítidas en CSS.
- Añadir varias paradas intermedias que siguen una curva de suavizado elimina el borde visible donde empieza y termina un desvanecido lineal.
En esta página
Las paradas de color de un degradado son los puntos en los que el degradado alcanza un color concreto. En CSS, cada parada es un color y una posición opcional, como #7c3aed 40%, y el navegador mezcla en línea recta entre paradas vecinas. Dónde las colocas lo decide casi todo: si una mezcla se siente suave o brusca, si un color domina y si el ojo ve una costura donde empieza un desvanecido. Mover las paradas suele mejorar más que cambiar los colores.
Cómo funcionan las paradas de color de un degradado
La línea de un degradado va del 0 al 100 por ciento. Cada parada fija un color en un punto de esa línea. Si omites las posiciones, el navegador reparte las paradas por igual, así que tres colores caen en el 0, el 50 y el 100 por ciento. Entre cada pareja, el color cambia a un ritmo constante. La sintaxis completa está en la referencia de linear-gradient() de MDN.
#1e3a8a, #f472b6Qué ocurre
#1e3a8a 20%, #f472b6 80%Qué ocurre
#1e3a8a, 30%, #f472b6Qué ocurre
#1e3a8a 50%, #f472b6 50%Qué ocurre
#1e3a8a 0 40%, #f472b6 40% 100%Qué ocurre
#1e3a8a 10px, #f472b6 200pxQué ocurre
Por qué las paradas repartidas por igual parecen artificiales
La luz real rara vez cambia a un ritmo constante. Un atardecer es casi todo de un color con una franja estrecha de cambio cerca del horizonte; una sombra es casi toda tono medio con una caída corta en su borde. Repartir por igual da a cada color la misma parte, y eso se lee como un gráfico. Decide qué color manda y deja que ocupe la mayor parte del espacio.
Pistas de color: mover el punto medio
Una pista de color es un porcentaje suelto colocado entre dos paradas. No añade ningún color; mueve el punto en que la mezcla está exactamente a medias. Una pista en el 20 por ciento significa que el color alcanza su punto medio pronto, así que el segundo color llega rápido y luego se queda. Las pistas son la forma más barata de que un degradado de dos colores parezca menos mecánico.
Paradas duras para rayas y bandas
Cuando dos paradas comparten posición, no hay distancia en la que mezclar, así que el color cambia de golpe. Así se dibujan rayas, fondos divididos, barras de progreso y banderas con un simple degradado. La sintaxis de doble posición, color inicio fin, lo hace más corto de escribir. Los degradados repetidos toman la misma idea y la repiten en mosaico, como explica degradados lineales repetidos.
Paradas suavizadas: eliminar la costura
Una mezcla lineal tiene un principio y un final visibles. Funde un scrim oscuro a transparente sobre una foto y a menudo verás una línea donde empieza el desvanecido, porque el ritmo de cambio salta de cero a máxima velocidad. Colocar varias paradas intermedias a lo largo de una curva de suavizado lo arregla: el color empieza a cambiar despacio, acelera y luego se asienta. Es especialmente útil en superposiciones detrás del texto y en degradados transparentes.
/* Linear: a visible edge where the fade starts */
.scrim-linear {
background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}
/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
background: linear-gradient(180deg,
rgba(10, 12, 20, 0) 40%,
rgba(10, 12, 20, 0.02) 46%,
rgba(10, 12, 20, 0.08) 52%,
rgba(10, 12, 20, 0.18) 58%,
rgba(10, 12, 20, 0.32) 66%,
rgba(10, 12, 20, 0.48) 74%,
rgba(10, 12, 20, 0.62) 82%,
rgba(10, 12, 20, 0.73) 91%,
rgba(10, 12, 20, 0.8) 100%);
}Cómo colocar paradas: un método práctico
- 1
Elige el color que manda
Dale entre el 50 y el 70 por ciento de la línea. Marca el ambiente.
- 2
Pon el cambio donde debe ir la mirada
Coloca el cambio de color más rápido cerca del punto focal, no en el centro por defecto.
- 3
Añade pistas antes que colores
Si una mezcla no convence, prueba primero a mover su punto medio. Los colores extra añaden complejidad.
- 4
Revisa los puntos medios
Mira el color a medio camino entre cada pareja. Si es gris, añade un puente o mezcla en OKLCH, como explica interpolación de degradados.
- 5
Suaviza los desvanecidos largos
En todo lo que se funda a transparente o a un color plano, añade paradas intermedias para que no haya costura.
Evita
- Dar a cada color la misma parte
- Añadir un color nuevo para arreglar cada problema
- Desvanecidos lineales a transparente detrás del texto
- Paradas duras donde querías mezclas suaves
Haz
- Un color que manda y los demás llegando tarde
- Pistas de color para desplazar una mezcla
- Paradas suavizadas para scrims y desvanecidos
- Paradas duras solo para rayas y bandas
Si quieres ver las paradas en su forma más sencilla, degradados lineales en CSS recorre la sintaxis completa y tipos de degradados muestra cómo se comportan las paradas en los degradados radiales y cónicos. En Gradiently, un Mark gestiona su propia mezcla y su luz a cualquier tamaño, así que puedes diseñar enseguida y dedicar el tiempo a las palabras.
Preguntas frecuentes
¿Qué es una parada de color en un degradado?
Un punto a lo largo de un degradado en el que se alcanza un color concreto, escrito en CSS como un color con una posición opcional, por ejemplo #7c3aed 40%.
¿Qué pasa si no doy posición a las paradas?
El navegador las reparte por igual del 0 al 100 por ciento. Tres colores caen en el 0, el 50 y el 100 por ciento.
¿Qué es una pista de color en un degradado CSS?
Un porcentaje suelto entre dos paradas, como #4c1d95, 25%, #f9a8d4. Mueve el punto medio de la mezcla sin añadir ningún color.
¿Cómo hago una línea dura en un degradado CSS?
Da a dos paradas la misma posición, por ejemplo #0f172a 50%, #f8fafc 50%, o usa la sintaxis de doble posición #0f172a 0 50%, #f8fafc 50% 100%.
¿Cómo hago que un degradado se funda suavemente a transparente?
Añade varias paradas intermedias cuya opacidad siga una curva ease in out. Un desvanecido simple de dos paradas suele mostrar una línea donde empieza.
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