Generador de degradados CSS

¿Qué es Generador de degradados CSS?

El Generador de Degradados CSS es una herramienta gratuita en el navegador para diseñadores web y desarrolladores front-end que quieren crear degradados de forma visual en lugar de escribir la sintaxis a mano. Elige lineal, radial o cónico —con una variante repetida opcional— y luego edita las paradas de color en una barra de vista previa arrastrable o en filas por parada con campos de color HEX y posición. Los degradados radiales ofrecen forma de círculo/elipse, una palabra clave de tamaño (closest-side, closest-corner, farthest-side, farthest-corner) y un centro at X% Y%, mientras que los cónicos admiten un ángulo inicial y un centro. Puedes apilar varias capas de degradado en un solo fondo separadas por comas, generar un degradado aleatorio, aplicar paletas predefinidas, rotar el tono de cada parada y copiar la regla background lista para pegar.

Cómo usar Generador de degradados CSS

1. Elige el tipo de degradado —Lineal, Radial o Cónico— y activa Repetido en las opciones para un patrón repetido.
2. Arrastra las paradas por la barra de vista previa para recolocarlas, haz clic en un punto vacío de la barra para añadir una parada o haz doble clic en una parada para eliminarla.
3. Ajusta cada parada con sus campos de color HEX y posición, o usa el cuentagotas (donde se admita) para tomar un color de tu pantalla.
4. Para degradados radiales, fija la forma (círculo o elipse), una palabra clave de tamaño y el centro X/Y; para los cónicos, fija el ángulo inicial y el centro.
5. Añade más capas para apilar degradados en un solo fondo, prueba Aleatorio, aplica una paleta o rota todos los tonos a la vez.
6. Copia la regla CSS background generada y pégala en tu hoja de estilos.

Ejemplos

Lineal, 90deg, #4f86f7 en 0% y #9333ea en 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Capa 1 lineal 90deg; Capa 2 radial circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Preguntas frecuentes

¿Qué tipos de degradado y opciones se admiten?

Degradados lineales, radiales y cónicos, cada uno con una variante repetida opcional. El radial añade forma de círculo/elipse, una palabra clave de tamaño (closest-side, closest-corner, farthest-side, farthest-corner) y un centro at X% Y%; el cónico añade un ángulo inicial y un centro. También puedes apilar varias capas en un solo fondo.

¿Cómo funciona la barra de paradas arrastrable?

Arrastra cualquier parada por la barra para cambiar su posición, haz clic en una parte vacía de la barra para insertar una nueva parada con un color interpolado y haz doble clic en una parada para eliminarla (se conservan al menos dos). Cada parada también tiene campos de color HEX y posición debajo de la barra.

¿Puedo tomar un color de mi pantalla?

Sí, en navegadores compatibles con la API EyeDropper. Cuando está disponible, aparece un botón de cuentagotas junto a cada parada; haz clic y elige cualquier píxel de la pantalla. Siempre puedes escribir un valor HEX o usar la muestra de color nativa.

¿Qué hacen Aleatorio, las paletas y rotar el tono?

Aleatorio sustituye la capa activa por un degradado aleatorio nuevo, las paletas cambian las paradas de la capa activa por un conjunto de colores seleccionado, y Rotar tono desplaza el tono de cada parada de cada capa a la vez. Solo cambian el degradado cuando haces clic en ellos.

¿Se suben mis colores o CSS a algún sitio?

No. El degradado se construye por completo en tu navegador con cálculos locales de cadenas y colores; ningún color, CSS ni configuración se envía nunca a un servidor, por lo que funciona sin conexión y mantiene tu trabajo privado.