Generador de degradados CSS
Diseña degradados CSS visualmente y copia el código.
Próximos pasos recomendados
Herramientas relacionadas
Convierte colores entre HEX, RGB y HSL, y comprueba el contraste WCAG.
Prueba una expresión regular contra texto y ve las coincidencias y los grupos de captura.
Crea un código QR a partir de cualquier texto o enlace y descárgalo en PNG o SVG.
Preguntas frecuentes
Genera una declaración background lista para pegar usando la función estándar linear-gradient() o radial-gradient() — por ejemplo background: linear-gradient(90deg, #1a6741 0%, #7ed957 100%);. Cópiala directamente en tu hoja de estilos o en un atributo style en línea.
Usa el botón Añadir parada de color para insertar paradas adicionales y, a continuación, define el color de cada parada y su posición de 0 % a 100 %. La herramienta ordena las paradas por posición automáticamente, así que puedes añadirlas en cualquier orden y el CSS generado se mantiene coherente.
El ángulo define la dirección en la que se mezclan los colores. 0deg orienta el degradado hacia arriba, 90deg hacia la derecha y 180deg hacia abajo. Arrastra el control deslizante del ángulo para girar el degradado y observa cómo se actualiza la vista previa en directo.
No. El degradado se construye por completo en tu navegador con CSS sencillo: no hay subidas, ni cuenta, y nada sale de esta página. Puedes usarlo sin conexión una vez cargada la página.
Última actualización: 2026-06-23.