Generador de degradados CSS

Crea bonitos degradados CSS lineales y radiales con dos o tres colores. Vista previa en tiempo real y copia el CSS al instante. Sin registro, totalmente en el navegador.

Crea un degradado en segundos. Elige dos o tres colores, selecciona lineal o radial, ajusta el ángulo y copia el CSS listo para pegar. Todo se ejecuta en tu navegador — nada se sube.

La vista previa se actualiza al cambiar los colores.

Sobre los degradados CSS

Lineal frente a radial

Un degradado lineal fluye en línea recta según un ángulo. Un degradado radial se irradia desde un centro en forma circular.

Dónde brillan los degradados

Aportan profundidad a botones, encabezados, tarjetas y fondos sin imágenes extra — manteniendo las páginas ligeras y rápidas.

Construido con chroma.js, una biblioteca de código abierto bajo licencia BSD.

Preguntas frecuentes

¿Puedo usar más de tres colores?
Esta herramienta admite hasta tres colores. Para más, puedes ampliar el CSS generado manualmente.
¿Importa el ángulo en los degradados radiales?
No — el ángulo solo se aplica a los degradados lineales. Los radiales se expanden uniformemente desde el centro.
¿Se suben mis datos de color?
No. Todo el procesamiento ocurre localmente en tu navegador.