Generador de Gradiente CSS
Crea hermosos degradados CSS fácilmente con esta herramienta en línea gratuita. Admite degradados lineales y radiales, múltiples paradas de color y ajuste de ángulo.
Generador de Gradiente CSS
Crea hermosos degradados CSS fácilmente con esta herramienta en línea gratuita. Admite degradados lineales y radiales, múltiples paradas de color y ajuste de ángulo.
Acerca de los gradientes CSS
Genera una declaración background estándar
Los gradientes lineales usan el ángulo seleccionado en grados, mientras que los radiales usan la forma circle o ellipse seleccionada. El resultado copiado es una sola declaración background que puede pegar en una hoja de estilos.
Las paradas de color se ordenan por posición
Puede agregar varias paradas de color, elegir cada color y establecer su posición de 0 a 100 percent. El CSS generado ordena las paradas por posición antes de unirlas, lo que mantiene predecible la declaración del gradiente.
Fondo de tres colores: azul, violeta y rosa
Elige Lineal y 90°. Coloca #2563eb en 0%, #7c3aed en 50% y #ec4899 en 100%. Los colores van de izquierda a derecha; mueve la parada central para cambiar dónde aparece el violeta. Pega esta declaración en la regla CSS de tu banner o tarjeta: background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
Resplandor radial: centro claro y fondo oscuro
Elige Radial y circle. Coloca #fef3c7 en 0%, #f59e0b en 35% y #0f172a en 100%. Crea un brillo centrado y opaco, no una capa transparente. Mueve la parada ámbar para ajustar la transición; elige ellipse para adaptar la forma a las proporciones del contenedor: background: radial-gradient(circle, #fef3c7 0%, #f59e0b 35%, #0f172a 100%);
División nítida: dos paradas en la misma posición
Elige Lineal y 90°. Mantén dos paradas en este orden: #0f172a en 50% y después #f8fafc también en 50%. Al coincidir las posiciones, los colores no se mezclan y forman un borde nítido entre izquierda y derecha. Mueve ambas al 30% para una división 30/70. Es una sola división, no rayas repetidas: background: linear-gradient(90deg, #0f172a 50%, #f8fafc 50%);
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Qué tipos de degradado se admiten?
Se admiten degradados lineales y radiales, con control total sobre ángulo, forma y posiciones de paradas de color.
¿Puedo agregar múltiples paradas de color?
Sí, agregue tantas paradas de color como necesite con posiciones personalizables para crear efectos de degradado complejos.
¿Genera código compatible con todos los navegadores?
Sí, genera sintaxis de degradado CSS estándar que funciona en todos los navegadores modernos.
¿Mis datos se envían a algún servidor?
No, la generación de CSS de degradado se realiza completamente en su navegador. Sus opciones de color y configuraciones se procesan localmente — nada se envía a ningún servidor.