Generador de Gradientes CSS

Crea degradados CSS lineales, radiales y cónicos sobre una pista visual y copia el código como CSS, Tailwind o SVG, directamente en tu navegador.

Acerca de Generador de Gradientes CSS

Qué es

Esta herramienta te deja diseñar un degradado arrastrando puntos de color sobre una pista en lugar de escribir la sintaxis a mano. Elige un degradado lineal, radial o cónico, ajusta el ángulo, la forma y la posición, da a cada punto su color y su opacidad y elige el espacio de color para transiciones más suaves. El resultado se copia como CSS, clase de Tailwind o SVG.

Funciones principales

  • Degradados lineales, radiales y cónicos, también repetitivos.
  • Puntos de color que añades, arrastras y quitas en una pista interactiva, cada uno con su opacidad.
  • Ángulo, forma y posición del centro.
  • Interpolación en sRGB, HSL, OKLab u OKLCH.
  • Código como CSS, Tailwind o SVG; un degradado aleatorio para inspirarte.

Cómo usarlo

  1. Elige el tipo de degradado o pulsa el botón de degradado aleatorio para partir de una idea.
  2. Haz clic en la pista para añadir puntos, arrástralos y ajusta el color y la opacidad de cada uno.
  3. Ajusta el ángulo, la forma o la posición y, si quieres, el espacio de color.
  4. Copia el código en el formato que necesites.

Cuándo es útil

  • Hacer un degradado de fondo o de botón para una web.
  • Conseguir un degradado suave sin el centro grisáceo que dan las mezclas sRGB normales.
  • Convertir un degradado en SVG para una ilustración o un icono.

Privacidad y limitaciones

Tus datos

El degradado se crea en el navegador y no se envía nada a ningún servidor: el sitio solo recibe un evento anónimo de «herramienta abierta». Un resultado que envías a otra herramienta se queda 24 horas en este dispositivo, en «Actividad reciente».

Limitaciones

  • SVG no tiene degradados cónicos: uno cónico se exporta a SVG como degradado lineal.
  • SVG siempre mezcla los colores en sRGB, así que un degradado en OKLab u OKLCH se ve algo distinto allí.

Preguntas frecuentes

¿Qué espacio de color elijo?

OKLCH u OKLab dan transiciones uniformes y vivas, por ejemplo de azul a amarillo sin un centro gris apagado. sRGB coincide con lo que generan las herramientas más antiguas.

¿Por qué el SVG se ve distinto del CSS?

SVG no tiene degradados cónicos y solo mezcla colores en sRGB. La herramienta te avisa cuando se aplica alguna de estas diferencias.

¿Todos los navegadores admiten degradados en OKLCH?

Todos los actuales, sí. Para los muy antiguos, elige sRGB, que funciona en todas partes.