css-tools.com logo CSS Tools
ES

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 violeta a amarillo

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.

Añadir capa

Dirección del degradado
Arrastra en la vista previa. En los degradados lineales y cónicos esto gira el ángulo; en los radiales, mueve el centro.

Capas
Al añadir una capa se crea encima un degradado aleatorio. Oculta una capa con su interruptor o mantenla pulsada para eliminarla.

Tipo de degradado
Elige lineal, radial o cónico por separado para cada capa.

Ángulo
Escribe un valor exacto si necesitas precisión.

Formas de vista previa
Cambia la forma en la parte superior para ver el degradado en distintos contextos.

background: linear-gradient(90deg, #ee82ee 0%, #ffff00 100%);