Puntos clave
- 01Se admiten los tres tipos de degradados CSS — lineales, radiales y cónicos — con vista previa en vivo.
- 02Añade hasta seis puntos de color, cada uno con posición y color independientes.
- 03El resultado es una declaración de fondo completa lista para pegar en cualquier hoja de estilos.
- 04Sin registro, sin instalación y nada se carga — todo se ejecuta en tu navegador.
¿Por qué usar un generador visual de degradados?
Escribir degradados CSS a mano se vuelve tedioso rápidamente. La sintaxis es legible una vez que la conoces, pero elegir posiciones exactas de puntos y colores sin una vista previa visual convierte una decisión de diseño simple en prueba y error en DevTools. Un generador te permite ver el resultado en tiempo real y exportar código limpio en el momento en que se ve bien.
Esta herramienta admite los tres tipos de degradados modernos. Lineal es la mezcla direccional clásica que usarás para fondos de héroe y botones. Radial se expande desde un punto — excelente para efectos de iluminación puntual y viñetas. Cónico barre alrededor de un centro, lo que lo convierte en la opción ideal para segmentos de gráficos circulares, ruedas de color e indicadores de carga. Comienza desde uno de los preajustes integrados (Lime Swiss, Sunset, Sky, Aurora) o diseña desde cero.
Cómo generar un degradado CSS
Todo el proceso toma menos de un minuto.
- 01
Elige un tipo de degradado
Selecciona Lineal, Radial o Cónico en el selector de tipo. Para lineal, también establece el ángulo. La vista previa se actualiza inmediatamente.
- 02
Añade y posiciona puntos de color
Haz clic en Añadir punto para insertar un nuevo punto, luego arrastra su deslizador o escribe un porcentaje para posicionarlo. Se admiten hasta seis puntos — los puntos se reordenan automáticamente por posición.
- 03
Elige el color de cada punto
Haz clic en la muestra de color para abrir el selector de color del sistema, o escribe un valor hexadecimal directamente. Funcionan ambos formatos RGB y hexadecimal.
- 04
Vista previa en tiempo real
El panel de vista previa renderiza tu degradado usando el motor de degradados nativo del navegador, por lo que el resultado coincide exactamente con lo que el CSS producirá en producción.
- 05
Copia la declaración CSS
Haz clic en Copiar para obtener la declaración completa background: linear-gradient(...). Pégala en una hoja de estilos, un componente estilizado o un valor arbitrario de Tailwind como bg-[<value>].
Casos de uso comunes de degradados
Cada tipo de degradado destaca en un escenario diferente.
- 01Fondos de sección de héroe — degradado lineal a 135° para un barrido diagonal moderno.
- 02Estados de desplazamiento de botones — degradado lineal sutil de dos puntos para profundidad.
- 03Foco radial o viñeta — radial oscuro a transparente en una superposición de imagen.
- 04Gráficos circulares y anillos de progreso — degradado cónico con paradas duras.
- 05Vistas previas de selector de rueda de color — degradado cónico de espectro completo.
- 06Degradados de texto — aplica el degradado al fondo, luego usa background-clip: text.
Se ejecuta completamente en tu navegador
El generador de degradados se ejecuta 100% en el lado del cliente — no se envían datos a ningún servidor. La vista previa se renderiza con el propio motor CSS de tu navegador, lo que significa que lo que ves coincide con lo que el navegador de cualquier visitante renderizará con el mismo CSS.
Una nota práctica: los clientes de correo electrónico aún tienen un soporte irregular para degradados CSS. Si estás pegando CSS generado en una plantilla de correo electrónico HTML, añade un color de fondo sólido como alternativa antes de la declaración de degradado para que los destinatarios en clientes antiguos vean algo razonable.
Preguntas frecuentes del generador de degradados CSS
¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?
Los degradados lineales hacen transición a lo largo de una línea recta en un ángulo dado. Los degradados radiales se expanden desde un punto central — útiles para resaltes y efectos puntuales. Los degradados cónicos barren alrededor de un centro como manecillas de reloj — ideales para segmentos de gráficos circulares y ruedas de color.
¿Puedo usar esto para proyectos de Tailwind CSS?
Sí. Copia el valor generado y úsalo como un valor arbitrario de Tailwind, por ejemplo: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind lo incluirá en tu hoja de estilos de salida.
¿La vista previa coincide exactamente con lo que veré en el sitio en vivo?
Sí — la vista previa se renderiza con el mismo motor de degradados del navegador que renderizará tu CSS en vivo, por lo que el resultado es exacto a nivel de píxeles.
¿Puedo usar degradados CSS en plantillas de correo electrónico?
La mayoría de los clientes de correo electrónico no admiten degradados CSS de forma confiable. Siempre añade un color de fondo sólido antes de tu declaración de degradado como alternativa.
¿Hay un límite en el número de puntos de color?
El generador admite hasta seis puntos. Para la mayoría de diseños, dos a cuatro es suficiente; más de seis tiende a reducir la claridad en lugar de añadir riqueza.