CSS Tools Generador de degradados CSS
Crea degradados lineales, radiales y cónicos de forma visual y copia CSS limpio. Apila varias capas, añade paradas de color con transparencia y arrastra directamente en la vista previa para cambiar la dirección.
Degradado CSS de amarillo a verde azulado
Cada degradado puede tener varias capas, y cada capa tiene su propio tipo, ángulo y colores. El resultado es CSS puro sin prefijos de navegador, listo para pegar en tu proyecto. El enlace de la página guarda tu degradado, así que puedes compartirlo o volver a él más tarde.
Cómo usar el generador de degradados
Elige el tipo de degradado
Selecciona lineal, radial o cónico para cada capa. El lineal mezcla los colores a lo largo de una línea recta, el radial los expande desde un punto central y el cónico los hace girar alrededor del centro.
Ajusta colores y capas
Haz clic en la barra de color para añadir una parada, arrástrala para cambiar su posición y elige cualquier color con transparencia. Con el botón de añadir capa colocas otro degradado encima.
Previsualiza tu diseño
Prueba el degradado en seis formas: pantalla completa, cuadrado, rectángulo horizontal y vertical, círculo y estrella. También puedes cambiar el fondo detrás de la forma.
background: linear-gradient(90deg, #ffff00 0%, #008080 100%);