Resumen
Esta herramienta convierte la elección de colores en un degradado CSS utilizable sin probar valores a mano. Cambia entre modo lineal y radial, ajusta el ángulo o el punto focal, y observa cada cambio en la vista previa al instante. Funciona bien cuando necesitas un fondo con intención: secciones de portada, botones, tarjetas, superposiciones, badges y detalles visuales suaves. El resultado es CSS limpio que puedes pegar en una hoja de estilos, un componente o un flujo de diseño basado en tokens.
Casos de uso
- Fondo para heroCrea un degradado fuerte para la parte superior de la página que acompañe el titular y la marca.
- Botón principalGenera un degradado de dos colores para llamadas a la acción y controles interactivos.
- Resplandor de tarjetaAñade una luz radial suave detrás de tarjetas de precios, bloques de funciones o paneles.
- Prueba de paletaCompara varias combinaciones antes de incorporarlas a una guía de estilos o sistema UI.
- Superposición sobre imagenConstruye una capa de degradado para mejorar el contraste del texto en banners e imágenes destacadas.
Como funciona
- 1
Elige los colores del degradado.
- 2
Selecciona modo lineal o radial.
- 3
Define ángulo, posición o expansión.
- 4
Revisa la vista previa en vivo.
- 5
Copia el CSS en tu proyecto.
Ejemplos
Fondo diagonal de marca
Entrada: #0f172a → #2563eb a 135°
Salida: background: linear-gradient(135deg, #0f172a, #2563eb);
Un degradado diagonal de oscuro a brillante para secciones principales.
Brillo radial suave
Entrada: #fff7ed → #fdba74 centrado
Salida: background: radial-gradient(circle at center, #fff7ed 0%, #fdba74 100%);
Un resaltado cálido para tarjetas y paneles.
Cabecera con tres paradas
Entrada: #111827 → #4f46e5 → #c084fc
Salida: background: linear-gradient(120deg, #111827 0%, #4f46e5 52%, #c084fc 100%);
Una transición más rica para encabezados y hero blocks.
FAQ
¿Puedo controlar dónde empieza el degradado?
Sí. En el modo lineal defines el ángulo, y en el radial también puedes mover el centro y el área de dispersión.
¿Por qué la vista previa puede verse distinta en mi proyecto?
Influyen el tamaño del elemento, el color de fondo que haya detrás y la forma en que cada navegador renderiza el degradado.
¿Cuántos puntos de color conviene usar?
Dos puntos funcionan bien para fondos simples; tres o más dan transiciones más ricas. Demasiados pueden recargar el diseño.
¿Puedo pegar el resultado en CSS normal y en estilos de componentes?
Sí. La declaración generada se puede usar en una hoja de estilos, un bloque inline o una definición de componente.