Colorear fondos de front-end
Arrastra paradas y ángulo para probar colores en vivo y, cuando te convenza, copia directamente el CSS de background.
Cargando…
Guide
El generador de degradados CSS permite editar degradados lineales, radiales y cónicos de forma visual y obtener el CSS listo para copiar. Las paradas de color se pueden arrastrar, crear con un clic en una zona vacía y modificar; siempre quedan al menos dos. El degradado lineal admite una dirección de 0–359°, el radial permite elegir círculo o elipse y nueve posiciones de centro, y el cónico deja fijar el ángulo inicial y el centro. La página incluye además una «inspiración aleatoria» basada en el módulo Web Crypto, que genera esquemas análogos, complementarios o tríadas.
Actualizado el 2026-09-102 min read
-webkit- y la primera línea ofrece un color sólido de respaldo.| Entrada | Salida | Notas |
|---|---|---|
| 135°, dos paradas | linear-gradient(...) |
Genera el CSS a la vez |
| Degradado cónico, centro abajo a la derecha | Fondo PNG | El canvas dibuja con el tamaño predefinido elegido |
Arrastra paradas y ángulo para probar colores en vivo y, cuando te convenza, copia directamente el CSS de background.
Exporta el mismo degradado en PNG a tamaño de escritorio 4K o de móvil en vertical.
No. Elige al azar un tono base y un esquema análogo, complementario o tríada, y después sortea saturación, luminosidad y ángulo lineal.
La primera es el color sólido de respaldo; la variante con prefijo WebKit aparece en los tipos lineal y radial, y la última línea es el degradado estándar moderno.
La paleta, el CSS y el PNG se calculan y se generan en el navegador; no se consultan servicios remotos de color ni de imágenes.
Actualizado el 2026-09-10
Edita visualmente degradados lineales, radiales y cónicos; copia el código CSS o exporta un fondo PNG
Esta herramienta no está traducida por completo; parte del contenido usa el idioma de origen o uno de reserva.
Arrastrar una parada para cambiarla de posición; hacer clic en una zona vacía para añadir otra
background: #6366f1; /* color de reserva para navegadores antiguos */ background: -webkit-linear-gradient(315deg, #6366f1 0%, #ec4899 100%); background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);