# Ángulo y dirección del degradado: hacia dónde debe ir

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

Los mismos dos colores pueden sentirse calmados, alegres o inquietos según hacia dónde corran. Así eliges una dirección a propósito y consigues el ángulo exacto en el código.

## The short version

- El ángulo de un degradado decide de dónde parece venir su luz y por dónde viaja el ojo en un diseño.
- Los degradados más claros arriba suelen sentirse naturales y calmados, porque la gente espera que la luz venga de arriba.
- Los degradados diagonales se sienten más enérgicos que los verticales u horizontales, y son la opción más común para fondos y botones.
- En CSS, 0deg apunta hacia arriba y los ángulos giran en el sentido de las agujas del reloj, así que 90deg va de izquierda a derecha y el valor por defecto es 180deg, de arriba abajo.
- Las palabras clave de esquina, como to top right, se adaptan a la forma de la caja, mientras que un ángulo fijo como 45deg no.

El **ángulo del degradado** es la dirección en que cambian los colores de un degradado, y hace más trabajo del que la mayoría espera. Decide de dónde parece venir la luz, dónde empieza y termina el ojo y si el diseño se siente calmado, alegre o inquieto. Como regla general, más claro arriba se siente natural, las diagonales se sienten enérgicas y el extremo claro debe quedar lejos de tus palabras. En CSS, los ángulos empiezan en `0deg` apuntando hacia arriba y giran en el sentido de las agujas del reloj.

## Cómo cambia la sensación la dirección del degradado

- 180deg: luz desde arriba: `linear-gradient(180deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 0deg: brillo desde abajo: `linear-gradient(0deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 90deg: de izquierda a derecha: `linear-gradient(90deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 135deg: diagonal: `linear-gradient(135deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`

Los mismos tres colores en cuatro direcciones. No cambia nada salvo el ángulo, y cada uno cuenta una historia distinta.

| Dirección | Se siente | Bueno para |
| --- | --- | --- |
| Luz arriba, oscuro abajo | Natural, calmado, con los pies en el suelo, como el cielo sobre la tierra | Fondos, sitios web, superficies de lectura |
| Luz abajo, oscuro arriba | Luminoso, teatral, como el amanecer o un escenario | Escenas nocturnas, drama, presentaciones de producto |
| De izquierda a derecha | Progreso, tiempo, un viaje | Líneas de tiempo, barras de progreso, banners |
| Diagonal | Energía, movimiento, impulso | Publicaciones, botones, portadas, lanzamientos |
| Radial desde una esquina | Un foco, una fuente de luz | Portadas, cabeceras, centrar la atención en una zona |

Lo que suele sugerir cada dirección. De izquierda a derecha se lee como progreso en los idiomas que se escriben de izquierda a derecha; en los que se escriben de derecha a izquierda puede sentirse invertido.

## Luz desde arriba

La gente tiende a suponer que la luz viene de arriba, porque casi siempre es así, del sol o de un techo. Un degradado más claro arriba coincide con esa expectativa, así que se lee natural y calmado: cielo sobre tierra, una pared iluminada, un objeto con luz suave. Dale la vuelta para que la luz esté abajo y los mismos colores se sienten teatrales, como una hoguera, un escenario o una pantalla brillando en la oscuridad. Ninguno está mal, pero el segundo debería ser una decisión.

La misma expectativa afecta a botones y tarjetas. Una superficie algo más clara arriba se lee como elevada; una más clara abajo se lee como hundida. Conviene saberlo al añadir un degradado sutil a un [botón con degradado](https://gradiently.design/es/guide/css-gradient-button).

## Diagonales y energía

Las líneas diagonales se sienten como movimiento, porque parecen inestables comparadas con las verticales y las horizontales. Por eso las diagonales, sobre todo de arriba a la izquierda hacia abajo a la derecha, son la opción más común para publicaciones sociales, botones y gráficos de lanzamiento. El inicio arriba a la izquierda coincide además con el punto donde los lectores de idiomas de izquierda a derecha empiezan una página, así que el extremo claro los recibe primero.

Las diagonales más inclinadas y más suaves cambian el ambiente. Alrededor de 100 a 120 grados se siente casi vertical con una ligera inclinación, calmado pero no estático. Alrededor de 150 a 160 grados se siente como una luz tardía rasando una superficie. Un 45 o un 135 exactos son lo más dinámico, y también lo más común, lo que es un motivo para probar algo ligeramente distinto si quieres destacar; mira [degradados de dos colores](https://gradiently.design/es/guide/two-color-gradients).

## Mantén la luz lejos de las palabras

La dirección también es composición. El extremo brillante de un degradado atrae la vista, así que colócalo donde quieras atención y mantén el texto en el extremo más calmado, donde el contraste es más estable. Un titular en lo alto de una publicación encaja con un degradado que se oscurece hacia arriba, con el brillo en la esquina de abajo, o al revés con letra oscura.

Una publicación vertical donde la parte más brillante del degradado queda detrás del titular

Cuando la parte más brillante del campo cae sobre el titular, las palabras y la luz compiten.

La misma publicación con la parte brillante del degradado alejada del titular

La luz alejada de las palabras: el ojo sigue viajando y el titular aguanta.

## Cómo funcionan los ángulos del degradado en CSS

En CSS, el ángulo de un degradado lineal describe la dirección en que viajan los colores. `0deg` apunta hacia arriba y los ángulos giran en el sentido de las agujas del reloj: `90deg` va de izquierda a derecha, `180deg` de arriba abajo y `270deg` de derecha a izquierda. Si omites el ángulo, el valor por defecto es `180deg`. También puedes usar palabras clave como `to right` y `to bottom left`.

```css
/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }
```

Ángulos y palabras clave. La última pareja difiere en cualquier caja que no sea cuadrada.

La diferencia de la última pareja importa en banners y stories. Un ángulo fijo como `45deg` corre siempre a 45 grados, sea cual sea la forma. Una palabra clave de esquina como `to top right` inclina el ángulo para ajustarse a la caja, de modo que el color del punto medio corre exactamente entre las otras dos esquinas. En un banner ancho de 3:1, `to top right` equivale a unos `18deg`, mucho más cerca de la vertical que `45deg`, porque las bandas de color tienen que quedar a lo largo de la diagonal larga. Usa palabras clave cuando quieras que el degradado vaya de esquina a esquina en cualquier forma; usa grados cuando quieras la misma inclinación en todas partes.

| Palabra clave | Ángulo | Dirección del recorrido |
| --- | --- | --- |
| `to top` | `0deg` | De abajo arriba |
| `to right` | `90deg` | De izquierda a derecha |
| `to bottom` | `180deg` | De arriba abajo (por defecto) |
| `to left` | `270deg` | De derecha a izquierda |
| `to bottom right` | `135deg` solo en un cuadrado | De la esquina superior izquierda a la esquina inferior derecha |

Palabras clave de CSS y sus ángulos. Las palabras clave de esquina solo equivalen a un ángulo fijo cuando la caja es cuadrada. Mira [MDN sobre linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

> **Las herramientas de diseño cuentan distinto** Muchas herramientas de diseño miden los ángulos desde la derecha y giran en sentido contrario a las agujas del reloj, o usan tiradores que se arrastran en lugar de números. Cuando pases un degradado de un archivo de diseño a CSS, comprueba la dirección a ojo en lugar de copiar el número.

## Elegir una dirección, paso a paso

1. **Decide de dónde viene la luz** De arriba para calma y naturalidad, de abajo para brillo y drama, de una esquina para un foco.
2. **Coloca primero las palabras** Pon el titular donde le corresponde en la composición y haz correr el degradado de modo que su extremo calmado quede detrás.
3. **Elige la inclinación según el ambiente** Vertical para calma, diagonal para energía, horizontal para progreso.
4. **Revisa cada formato** Una dirección que funciona en un cuadrado puede poner la luz en el lugar equivocado en una story o un banner. Ajusta por tamaño en lugar de recortar.

Para el resto de la sintaxis del degradado lineal, mira [degradados lineales en CSS](https://gradiently.design/es/guide/css-linear-gradient). Para otras formas que no tienen una sola dirección, mira [tipos de degradados](https://gradiently.design/es/guide/types-of-gradients). Los Marks de Gradiently se renderizan para cada tamaño en el que diseñas, de modo que su luz cae en un lugar sensato en cada formato en lugar de donde la deje un recorte.

## FAQ

### ¿Cuál es el mejor ángulo para un degradado?

No hay un único mejor ángulo. Más claro arriba se siente natural y calmado, las diagonales de unos 135 grados se sienten enérgicas, y el extremo claro debe quedar lejos de tu texto.

### ¿Hacia dónde apunta 0deg en un degradado CSS?

Hacia arriba. `0deg` va de abajo arriba y los ángulos giran en el sentido de las agujas del reloj, así que `90deg` va de izquierda a derecha y `180deg` de arriba abajo.

### ¿Cuál es la dirección por defecto de un degradado lineal en CSS?

De arriba abajo, igual que `180deg` o `to bottom`.

### ¿Es 45deg lo mismo que to top right?

Solo en una caja cuadrada. `to top right` se adapta a la forma de la caja para que el degradado vaya de esquina a esquina, mientras que `45deg` mantiene la misma inclinación en cualquier forma.

### ¿Por qué mi degradado se ve al revés después de copiarlo de una herramienta de diseño?

Muchas herramientas de diseño miden los ángulos de forma distinta a CSS. Comprueba la dirección a ojo y ajusta el ángulo en CSS.