Un gradiente lineal cambia de color sobre un eje; uno radial se expande desde un centro; uno cónico gira alrededor de él. Elige primero la geometría: dos colores pueden producir una franja, un foco o un barrido.
Un eje o una distancia desde el centro
En linear-gradient(), 0deg apunta arriba, 90deg a la derecha y 180deg abajo; los colores avanzan de la primera parada a la última en esa dirección. radial-gradient(ellipse at 50% 50%, ...) empieza en el centro de la caja y se expande hacia la elipse final. El centro depende del ancho y alto: 25% 50% lo desplaza a la izquierda sin girarlo.
El gradiente cónico sigue un ángulo, no un radio
En conic-gradient(from 0deg at 50% 50%, ...), el inicio queda sobre el centro y los colores avanzan en sentido horario. Una parada al 25% significa un cuarto de vuelta, no del radio. Cambiar from 0deg a from 90deg gira el inicio. Si los colores extremos difieren, aparece una unión visible; igualarlos cierra el ciclo.
Verifica la declaración en su contexto real
Conserva un background-color de respaldo y guarda el CSS antes de recargar: las paletas no se almacenan. Prueba navegadores y tamaños previstos. Comprueba el contraste en todo el gradiente visible, no en un punto; la vista previa no certifica accesibilidad ni compatibilidad.