Cómo usarla
- 1Elige el tipo: lineal, radial o cónico.
- 2Ajusta el ángulo, o la forma y el centro en los radiales.
- 3Haz clic en la barra para añadir paradas de color y arrástralas; cambia color, posición y opacidad.
- 4Copia el CSS o el valor arbitrario de Tailwind, o parte de un degradado predefinido.
Tipos de degradado en CSS
linear-gradient() reparte los colores en línea recta según un ángulo (90deg va de izquierda a derecha); radial-gradient() los reparte desde un centro en forma de círculo o elipse; y conic-gradient() los gira alrededor de un punto, útil para gráficos circulares o efectos de brillo. Todos son compatibles con los navegadores actuales y no necesitan imágenes.
Paradas de color y transparencia
Cada parada tiene un color, una posición en porcentaje y una opacidad. Dos paradas en la misma posición crean un corte nítido en vez de una transición, y bajar la opacidad permite superponer el degradado sobre una imagen. El botón «Invertir» da la vuelta al orden de los colores.
Código CSS y Tailwind
El código incluye primero una declaración background con un color sólido de respaldo (el de la primera parada), por si el degradado no se puede mostrar, y después la declaración con el gradiente. Si usas Tailwind CSS, copia el valor arbitrario bg-[…] y pégalo directamente en la clase del elemento.
Preguntas frecuentes
¿Cómo hago un degradado en CSS?
Con background: linear-gradient(90deg, #color1, #color2). El generador escribe el código por ti a partir de lo que diseñes.
¿Puedo usar transparencia?
Sí, cada parada de color tiene un control de opacidad.
¿Funciona con Tailwind?
Sí, la herramienta genera el valor arbitrario de Tailwind listo para copiar.
¿Qué es un degradado cónico?
Uno en el que los colores giran alrededor de un punto central, como las agujas de un reloj.
¿No te convencen los resultados?
Habla con Webin Agency sobre webs rápidas y optimizadas para SEO, e-commerce y gestión de Google Ads.