Generador de Degradado CSS
Crea hermosos degradados CSS gratis en línea. Diseña degradados lineales y radiales con múltiples paradas de color y copia el código CSS al instante.
Preview
CSS Code
Cómo funciona
- Elige el tipo de degradado – lineal o radial – según las necesidades de tu diseño.
- Añade paradas de color haciendo clic en la barra deslizante y seleccionando colores desde el selector de color.
- Ajusta el ángulo o la dirección del degradado con el control de rotación.
- Visualiza el resultado en tiempo real en el área de vista previa.
- Copia el código CSS generado con un solo clic y pégalo directamente en tu proyecto.
Ejemplo
Entrada: Degradado lineal: de #1FA2FF (0%) a #12D8FA (50%) y #A6FFCB (100%), ángulo 90°
Resultado: background: linear-gradient(90deg, #1FA2FF 0%, #12D8FA 50%, #A6FFCB 100%);
FAQ
Sí, totalmente. Todo el procesamiento ocurre directamente en tu navegador. Ningún dato se envía a ningún servidor, por lo que tu trabajo permanece completamente privado.
Sí, puedes añadir tantas paradas de color como quieras para crear degradados complejos y multicolor con transiciones suaves.
El código generado es compatible con todos los navegadores modernos. La herramienta añade automáticamente los prefijos de proveedor necesarios para una mayor compatibilidad.
No, la herramienta es completamente gratuita y no requiere ningún registro ni inicio de sesión.
Un degradado lineal transiciona de un color a otro a lo largo de una línea recta en un ángulo definido, mientras que uno radial irradia hacia afuera desde un punto central en forma circular.