Generador de Degradado CSS

Crea degradados CSS lineales y radiales visualmente. Vista previa en vivo, copia el código CSS con un clic.

Tipo
90°

Puntos de color

Código CSS

Cómo usar el generador de degradado CSS

  1. Elige el tipo Lineal o Radial.
  2. Para degradados lineales, arrastra el control Dirección para ajustar el ángulo.
  3. Elige colores para cada punto. Haz clic en + Añadir punto para agregar más. La vista previa y el CSS se actualizan al instante.
  4. Haz clic en Copiar para copiar la propiedad CSS background lista para usar.

Sintaxis de degradados CSS

Los degradados lineales usan linear-gradient(ángulo, color1, color2, ...). El ángulo puede ser en grados (90deg) o como palabra clave (to right). Los degradados radiales usan radial-gradient(forma, color1, color2, ...). Ambos aceptan cualquier número de puntos de color con posiciones opcionales (ej. red 20%, blue 80%).