Skip to content

Generador de degradados CSS

In-browser only Linear, Radial & Conic One-click Copy
⌘/Ctrl+⇧R aleatorio←/→ mover parada
deg
#6366f1
%
#a855f7
%
#ec4899
%
Atardecer
Océano
Bosque
Neón
Pastel
Monocromático
background: linear-gradient(
  135deg,
  #6366f1 0%,
  #a855f7 50%,
  #ec4899 100%
);
Generador de degradados CSS

Degradado · Lineal · 3

Cmd/Ctrl+Mayus+R aleatorio · Esc salir
Herramientas relacionadas Ver todo

Resumen

Disena degradados CSS visualmente en tu navegador

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

  • Degradados lineales, radiales y cónicos
  • Selector de color HSB con cuentagotas
  • Espacios de color OKLCH y LCH
  • Exportación SVG y Tailwind
  • Enlaces compartibles
  • Superposición de contraste WCAG
  • 24 preajustes seleccionados
  • Se ejecuta completamente en tu navegador
  • No se suben ni almacenan datos
  • Funciona sin conexion una vez cargado
  • No requiere cuenta ni inicio de sesion
  • Crear fondos CSS con degradado
  • Disenar cabeceras y banners
  • Estilizar botones y tarjetas con degradados
  • Explorar degradados lineales, radiales y conicos
  • Copiar el CSS del degradado o la config Tailwind

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.