Escribir la sintaxis de un degradado a mano es delicado: el ángulo, el orden de las paradas y las posiciones en porcentaje interactúan entre sí, y un simple error tipográfico rompe silenciosamente todo el background. Este generador mantiene la vista previa y el código sincronizados: lo que ves es exactamente, byte a byte, el CSS que copias. Se ejecuta enteramente en el navegador, así que nada de lo que diseñas se sube a ningún servidor.
Generador de Degradados CSS Gratis
Funciona del todo en tu navegador: sin subir nada y sin registro.
Tipo
Paradas de color
Código CSS
¿Qué es un generador de degradados CSS?
Un generador de degradados CSS es una herramienta visual que construye el código de linear-gradient(), radial-gradient() o conic-gradient() por ti. Elige los colores, arrastra las paradas, ajusta el ángulo y copia el CSS listo para pegar mientras una vista previa en vivo muestra exactamente lo que renderizará el navegador. Todo funciona en tu propio navegador.
Cómo se usa
- 1Elige un tipo de degradado. Selecciona lineal, radial o cónico. El lineal muestra un control de ángulo; el radial añade forma (círculo o elipse) y posición; el cónico tiene un ángulo inicial y una posición.
- 2Define las paradas de color. Haz clic en cada muestra de color para elegirlo y arrastra su control deslizante para mover la parada a lo largo del degradado. Añade hasta 8 paradas o elimina hasta dejar solo 2.
- 3Ajusta la dirección. Arrastra el control de ángulo (0 a 360 grados) o elige una palabra clave de posición. La vista previa se actualiza en vivo con cada cambio.
- 4Copia el CSS. Pulsa Copiar para obtener la declaración de background, que incluye una línea de respaldo en color sólido, y pégala en tu hoja de estilos.
Para quién es
- Desarrolladores front-end que necesitan el fondo de un hero, una tarjeta o un botón y quieren la línea exacta de
linear-gradient()sin memorizar la sintaxis. - Diseñadores web y de UI que replican un mockup: recrean el degradado visualmente y pasan el CSS generado directo al equipo de desarrollo.
- Creadores de emails y landing pages que necesitan una línea de respaldo en color sólido para que el diseño se degrade con elegancia en clientes antiguos; el resultado la incluye automáticamente.
- Estudiantes de CSS que quieren ver en tiempo real cómo el ángulo, las paradas de color y el tipo de degradado cambian el resultado renderizado.
Preguntas frecuentes
¿Es gratis este generador de degradados CSS?
Sí, 100% gratis, sin registro, sin marcas de agua y sin límites. Crea todos los degradados que quieras y copia el CSS directo a tu proyecto.
¿Se sube algo a un servidor?
No. El degradado se construye y previsualiza enteramente en tu navegador con JavaScript. No se envían colores, código ni datos de uso a ningún sitio.
¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?
Un degradado lineal mezcla colores a lo largo de una línea recta con el ángulo que elijas. Un degradado radial se irradia desde un punto central en forma de círculo o elipse. Un degradado cónico reparte los colores alrededor de un punto central, como una rueda de color o un gráfico de tarta.
¿Cómo funcionan las paradas de color en los degradados CSS?
Cada parada empareja un color con una posición de 0% a 100% a lo largo de la línea del degradado. El navegador mezcla suavemente entre paradas vecinas. Colocar dos paradas en la misma posición crea un borde duro en vez de una mezcla, algo útil para rayas o efectos de gráfico de tarta.
¿Qué navegadores soportan estos degradados?
Todos los navegadores modernos (Chrome, Firefox, Safari y Edge) soportan linear-gradient() y radial-gradient() sin prefijos; conic-gradient() es compatible en todas partes desde 2020. El código copiado también incluye un respaldo en color sólido para lo más antiguo.
¿Puedo usar el degradado generado como color de texto?
No directamente: los degradados son imágenes, no colores. Aplica el degradado como background-image sobre el elemento de texto y añade background-clip: text y color: transparent para que el degradado se vea a través de las letras.
¿Por qué mi degradado muestra bandas?
Las bandas aparecen cuando dos paradas lejanas se mezclan a lo largo de un tramo largo de tonos similares, dejando a la vista los escalones de color de 8 bits. Redúcelas añadiendo una parada de color intermedia, acortando la distancia de la mezcla o eligiendo colores que difieran también en luminosidad, no solo en matiz.