Qué es un degradado CSS
Un degradado (gradient) es un fondo que pasa suavemente de un color a otro. En CSS no es una imagen: el navegador lo genera a partir de una función, así que pesa cero y se ve nítido en cualquier pantalla o zoom.
- Lineal (linear-gradient): los colores avanzan en línea recta según un ángulo, por ejemplo de arriba a abajo o en diagonal. Es el más usado en botones, cabeceras y fondos.
- Radial (radial-gradient): los colores irradian desde un punto hacia fuera, como un círculo de luz. Funciona bien para focos, viñetas y fondos con profundidad.
La sintaxis, pieza a pieza
La función recibe la dirección y una lista de paradas (stops): cada parada es un color y su posición dentro del recorrido. Con dos paradas van del 0 % al 100 %; si añades una tercera, se coloca en el 50 % y el navegador reparte los tramos de manera uniforme.
Fórmula
background: linear-gradient(135deg, #7c3aed 0%, #f59e0b 100%);
En el radial el ángulo se sustituye por el punto de origen: radial-gradient(circle at 50% 50%, #7c3aed 0%, #f59e0b 100%). El ángulo se mide desde la dirección «hacia arriba»: 0° sube, 90° va a la derecha, 135° apunta a la esquina inferior derecha y 180° baja.
| Ángulo | Dirección del degradado |
|---|---|
| 0° | Hacia arriba |
| 90° | Hacia la derecha |
| 135° | Hacia la esquina inferior derecha |
| 180° | Hacia abajo |
| 225° | Hacia la esquina inferior izquierda |
Consejos de accesibilidad
- Si pones texto encima de un degradado, el contraste cambia punto a punto: compruébalo sobre la zona más clara y también sobre la más oscura, no solo en el centro.
- Cuanto más se parezcan las luminosidades de las dos paradas, más uniforme será el fondo y más fácil mantener el texto legible en todas partes.
- Un truco habitual: una capa semitransparente oscura o clara entre el degradado y el texto estabiliza el contraste sin desmontar el diseño.
- Antes de publicar, pasa el color del texto y los dos colores del degradado por el comprobador de contraste y quédate con la combinación que cumpla AA (4,5 : 1 en texto normal).
Tampoco comuniques nada solo con color: si el degradado distingue estados o zonas, añade un texto o un icono que lo confirme.