Skip to content
Diseno · undefined

Generador de degradados CSS

Crea degradados lineales, radiales y cónicos visualmente. Ajusta paradas de color, elige un espacio de color y copia el CSS.

In-browser only Linear, Radial & Conic One-click Copy
deg
#6366f1
%
#a855f7
%
#ec4899
%
background: linear-gradient(
  135deg,
  #6366f1 0%,
  #a855f7 50%,
  #ec4899 100%
);
Atardecer
Océano
Bosque
Neón
Pastel
Monocromático

Cómo usar

Crea tu degradado en cuatro pasos

  1. 1
    Elige el tipo de degradado

    Selecciona Lineal, Radial o Cónico en el conmutador superior.

  2. 2
    Agrega paradas de color

    Arrastra los controladores en la pista. Haz doble clic para agregar una nueva parada.

  3. 3
    Ajusta el ángulo y el espacio de color

    Establece el ángulo con la entrada numérica. Elige un espacio de color para controlar la mezcla.

  4. 4
    Copia tu CSS

    El CSS se actualiza en tiempo real. Haz clic en Copiar CSS o usa el menú Exportar.

Preguntas frecuentes

¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?
Un degradado lineal transiciona colores a lo largo de una línea recta. Un degradado radial irradia desde un punto central. Un degradado cónico gira los colores alrededor de un centro.
¿Qué significa "espacio de color" en los degradados CSS?
El espacio de color controla cómo se calculan los colores intermedios. sRGB es el más compatible. oklch produce transiciones más uniformes.
¿Puedo exportar como SVG?
Sí. Abre el menú Exportar y haz clic en Descargar SVG.
¿Cómo comparto un enlace?
Haz clic en Compartir enlace en el menú Exportar. El estado completo se codifica en el hash de la URL.