Generador de degradado CSS
Cree rápidamente un fondo en degradado (linear-gradient) para una página web, con vista previa en tiempo real y código CSS listo para copiar — sin abrir Figma ni Photoshop.
Cómo funciona
Un degradado lineal CSS (linear-gradient) permite crear un fondo visualmente rico —banner, botón, fondo de sección— sin imagen ni herramienta de diseño externa. Elija dos colores y un ángulo, observe la vista previa en directo, y luego copie directamente la propiedad background generada en su hoja de estilos. Es el enfoque más rápido para prototipar un fondo degradado antes de perfeccionarlo en su guía de estilo.
¿Puedo usar más de dos colores en un degradado?
El CSS lo permite nativamente (linear-gradient(90deg, #fff, #f00, #00f), por ejemplo), pero esta herramienta se centra deliberadamente en un degradado de dos colores, el caso de uso más común para un fondo de sección o de botón. Para un degradado más complejo, puede copiar el resultado generado aquí y luego añadir puntos de color adicionales directamente en su CSS.
¿Qué representa el ángulo del degradado?
El ángulo determina la dirección en la que progresa el degradado: 0° va de abajo hacia arriba, 90° va de izquierda a derecha, 180° va de arriba hacia abajo, etc. Es la misma convención utilizada nativamente por la función CSS linear-gradient(), así que el código copiado aquí produce exactamente el resultado que ve en la vista previa.
Procesamiento 100% local: la generación del código CSS se realiza directamente en su navegador mediante WebAssembly, sin ninguna llamada a un servidor externo.