Cómo se usa
- Elige Lineal o Radial.
- En los degradados lineales, ajusta el ángulo.
- Define el color y la posición de cada parada. Añadir parada suma colores, hasta cinco, y Quitar los elimina.
- Pulsa Copiar y pega la regla en tu CSS.
Qué significa el resultado
El valor por defecto es background: linear-gradient(90deg, #ff7a18 0%, #af002d 100%);: va del naranja en el borde izquierdo al rojo oscuro en el derecho. Cada par es un color y el punto donde se alcanza por completo. Entre dos paradas el navegador mezcla los colores.
Ejemplo
Tres paradas, #ff7a18 al 0 %, #ffffff al 50 % y #af002d al 100 %, dan un degradado que pasa por el blanco en el centro: linear-gradient(90deg, #ff7a18 0%, #ffffff 50%, #af002d 100%).
Consejos
- Pon dos paradas en la misma posición para lograr un corte nítido en vez de una transición.
- Los colores se mezclan en sRGB, así que entre complementarios el centro puede verse grisáceo; añade una parada intermedia para controlarlo.
- Comprueba el contraste del texto sobre un degradado en sus dos extremos.