Dos colores, cuatro direcciones, código listo para copiar
El generador de degradados previsualiza un degradado entre dos colores cualesquiera y escribe el CSS por ti. Elige diagonal, horizontal, vertical o radial, y copia la declaración linear-gradient o radial-gradient, o las clases de utilidad equivalentes de Tailwind. Tus dos colores se guardan en la URL, así que un degradado se puede compartir con un enlace, y tienes a un clic un conjunto de pares predefinidos creados con colores de Material Design.
Cómo usarlo
- Define los colores Desde y Hasta con los selectores o escribiendo códigos hex.
- Elige una dirección debajo de la vista previa: diagonal (135°), horizontal, vertical o radial.
- Copia el CSS o las clases de Tailwind con los botones de copiar.
- Pulsa Compartir para copiar un enlace, o abre la página propia del degradado para ver los detalles de color de ambos extremos.
Salida CSS vs. Tailwind
La pestaña CSS te da una declaración simple background: linear-gradient(135deg, #A, #B); que funciona en todos los navegadores modernos sin prefijos. La pestaña Tailwind te da las utilidades equivalentes bg-gradient-to-r from-[#A] to-[#B] con valores arbitrarios, así que los colores no tienen que existir en tu configuración de Tailwind. Si usas Tailwind v4, la utilidad de dirección se escribe bg-linear-to-r; las clases from/to no cambian.
Ejemplos
- Fondo de hero: de un índigo oscuro a un índigo un poco más claro, en diagonal, mantiene legible el texto blanco y añade profundidad.
- Hover de botón: un degradado horizontal entre dos tonos de tu color primario se siente más vivo que un cambio de color plano.
- Avatar por defecto: un degradado radial de un color de marca a su tono más oscuro luce intencional con las iniciales encima.
Consejos
- Los degradados entre dos tonos del mismo matiz casi siempre quedan bien. Elige ambos de una misma familia en la paleta Material.
- Los matices opuestos pueden producir un gris sucio en el centro; si ocurre, mueve uno de los extremos hacia un matiz vecino.
- Comprueba el texto sobre degradados en el punto más claro con el verificador de contraste, no en el promedio.
- Extrae los dos colores de una foto con el extractor de colores de imagen para un degradado que combine con tus imágenes.