ToolAtlas
FavoritosRecientes

Generador de degradados CSS

Procesado en este navegador

Límite de texto: 2000000 caracteres

Esta herramienta no sube tu entrada.

Elige dos o más paradas, una dirección y copias `linear-gradient(...)`. Sirve para un hero o un botón. No exporta PNG de fondo ni garantiza que el titular se lea.

Quieres un hero que no sea un azul plano. Wutools ya vende degradados con «auditoría WCAG»; la letra pequeña es que un solo ratio no cubre todo el recorrido. Esta página te da el CSS y te empuja a contrastar.

Generas linear-gradient o radial-gradient con paradas. Lo pegas en background-image. No es un mesh de Figma ni un SVG de ilustración.

Cómo

  1. Elige dirección (180deg = de arriba abajo) y dos hex de marca.
  2. Copia la regla. Prueba el titular en el tramo más claro y en el más oscuro.
  3. Si falla AA, oscurece un extremo o superpón linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)).
background-image: linear-gradient(160deg, #0f172a, #1d4ed8);

La sombra de la card va en box-shadow.

Límites

  • No genera un PNG «para Instagram».
  • No es un fondo de videollamada.
  • Navegadores viejos sin linear-gradient no son el objetivo.

CSS local. El contraste no se improvisa.

Preguntas frecuentes

El texto blanco se come en la parte clara.

Normal. El ratio cambia a lo largo del degradado. Pon una capa oscura semitransparente o una tarjeta, y mide el peor punto con el comprobador de contraste.

¿Puedo bajarlo como imagen?

El trabajo de esta página es CSS. Un PNG de marcador está en imagen de marcador.

¿Es lo mismo que una paleta?

La paleta son hex sueltos: generador de paletas. El degradado es la interpolación entre ellos.

¿Soporta OKLCH o conic-gradient?

Depende de lo que pinte la UI. No prometemos Tailwind v4 ni tokens. Copia y prueba en tu navegador objetivo.

¿Se sube algo?

No. Solo colores y CSS.

Herramientas relacionadas