Saltar al contenido
nearnull

Generador de Degradados CSS

Armá degradados CSS lineales y radiales con vista previa en vivo y copiá el código. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.

Opciones
Tipo
CSS 
background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #db2777 100%);

¿Qué es un degradado CSS?

Un degradado CSS es una imagen que el navegador dibuja a partir de una lista de colores, mezclándolos de forma suave, así que no necesita descargar ningún archivo y se ve nítido en cualquier tamaño. Un degradado lineal mezcla a lo largo de una línea recta con el ángulo que elijas, y uno radial se expande desde el centro como un círculo o una elipse. Cada color es un stop con una posición en el recorrido. Este generador te deja elegir el tipo, el ángulo y hasta seis stops de color, muestra una vista previa en vivo y escribe el CSS, con un color sólido de respaldo primero.

Ejemplos

El mismo degradado escrito para distintos destinos:

CSS
background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #db2777 100%);
Tailwind
<div class="bg-gradient-to-r from-blue-600 to-pink-600"></div>
JavaScript
element.style.background =
  "radial-gradient(circle, #2563eb 0%, #db2777 100%)";
Canvas
const g = ctx.createLinearGradient(0, 0, width, 0);
g.addColorStop(0, "#2563eb");
g.addColorStop(1, "#db2777");
ctx.fillStyle = g;
SVG
<linearGradient id="g">
  <stop offset="0%" stop-color="#2563eb" />
  <stop offset="100%" stop-color="#db2777" />
</linearGradient>

Casos de uso

Secciones hero y banners

Dale profundidad al header de una landing con un degradado de dos o tres colores en vez de una imagen de fondo pesada.

Botones y badges

Un degradado sutil entre dos tonos cercanos hace que un call to action se destaque sin cambiar de color.

Overlays sobre imágenes

Poné un degradado de transparente a oscuro sobre una foto para que el texto blanco encima siga siendo legible.

Placeholders y avatares

Generá fondos coloridos para estados vacíos, tarjetas cargando o avatares por defecto, sin archivos de imagen.

Preguntas frecuentes

¿Por qué hay una línea de background liso antes del degradado?
Es un respaldo. Un navegador que no entiende el degradado ignora esa declaración y se queda con el color sólido de la línea anterior, así el elemento nunca queda sin fondo.
¿Cómo funciona el ángulo?
0deg apunta hacia arriba, 90deg a la derecha, 180deg hacia abajo y 270deg a la izquierda. La línea del degradado va en esa dirección, así que 90deg empieza con el primer color a la izquierda y termina con el último a la derecha.
¿Puedo usar colores transparentes?
Sí. Escribí un color con alpha, como #00000080 o rgba(0, 0, 0, 0.5), en cualquier stop. Así se hacen los overlays sobre imágenes y los efectos de desvanecido.
¿Por qué no ofrece degradados cónicos?
conic-gradient() no está soportado en todos los navegadores a los que apunta este sitio (Firefox lo agregó en la versión 83), así que la herramienta se queda con degradados lineales y radiales, que funcionan en todos lados.
¿Mis datos se envían a algún servidor?
No. La vista previa y el CSS se generan en tu navegador con JavaScript plano. No se transmite ni se guarda nada.

Herramientas relacionadas

Conversor de Colores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Color (WCAG AA / AAA)Generador de Tonalidades (Tints y Shades)Generador de Paletas de Colores (Armonías)Selector de Color de ImagenSimulador de Daltonismo