# Paradas de color en degradados: dónde colocar cada color

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

Dos degradados con los mismos colores pueden no parecerse en nada. La diferencia está en dónde van las paradas y en cómo viaja la mezcla entre ellas. Es la parte del degradado que casi nadie toca.

## The short version

- 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.

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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| Escribes | Qué ocurre |
| --- | --- |
| `#1e3a8a, #f472b6` | Dos paradas en 0% y 100% |
| `#1e3a8a 20%, #f472b6 80%` | Azul marino sólido hasta el 20%, mezcla, rosa sólido después del 80% |
| `#1e3a8a, 30%, #f472b6` | Una pista de color: el punto medio pasa al 30% |
| `#1e3a8a 50%, #f472b6 50%` | Un borde duro en el centro, sin mezcla |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Doble posición: dos bandas sólidas |
| `#1e3a8a 10px, #f472b6 200px` | Las longitudes funcionan igual que los porcentajes |

Sintaxis de las paradas en CSS. Las mismas ideas se aplican en Figma, Photoshop y cualquier editor de degradados, solo que con deslizadores.

## 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.

- Uniforme: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)`
- Con peso: manda el azul: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)`
- Con peso: arriba cálido: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)`

Una paleta, tres colocaciones. Las versiones con peso parecen un cielo en dos momentos distintos; la uniforme parece generada.

## 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.

- Sin pista, punto medio al 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)`
- Pista al 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)`
- Pista al 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)`

El mismo violeta a rosa. Mover la pista hace que un color domine sin editar ninguno de los dos.

## 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](https://gradiently.design/es/guide/css-repeating-gradient).

- Mitad y mitad: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)`
- Tres bandas: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)`
- Escalones en diagonal: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Paradas duras en acción. Sin mezcla, solo bordes.

## 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](https://gradiently.design/es/guide/css-gradient-transparent).

```css
/* 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%);
}
```

Los dos scrims terminan con la misma intensidad. El suavizado no tiene ninguna línea donde empieza.

> **La misma idea en movimiento** Las paradas suavizadas son la versión en degradado de una curva de suavizado en animación. [Easing](https://gradiently.design/es/guide/easing) explica por qué el ease in out parece natural, y el mismo razonamiento vale aquí.

## 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](https://gradiently.design/es/guide/gradient-interpolation).
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](https://gradiently.design/es/guide/css-linear-gradient) recorre la sintaxis completa y [tipos de degradados](https://gradiently.design/es/guide/types-of-gradients) 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.

## FAQ

### ¿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.