Generador de degradado CSS

Generador visual de degradados CSS lineales, radiales y cónicos: añade paradas de color, ajusta el ángulo y copia el CSS. Perfecto para fondos y botones, gratis en tu navegador.

Repetir

각도: 135deg

Parada de color

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Insertar

<iframe src="https://devtools.patrache.studio/es/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Generador de degradado CSS — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/es/generators/css-gradient/">Generador de degradado CSS</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Última actualización: 2026 · Herramienta en línea gratuita

¿Qué es Generador de degradado CSS?

Generador visual de degradados CSS lineales, radiales y cónicos: añade paradas de color, ajusta el ángulo y copia el CSS. Perfecto para fondos y botones, gratis en tu navegador.

Cómo usar

1
Seleccionar tipo— Elija el tipo de degradado (lineal, radial, cónico).
2
Ajustar puntos de color— Ajuste el color y la posición de cada punto de color.
3
Vista previa— Verifique el resultado en tiempo real en la vista previa.
4
Copiar código CSS— Copie el código CSS al portapapeles con el botón 'Copiar'.

Herramientas relacionadas

Generador CSS box-shadowGenerador de box-shadow CSS con controles de desplazamiento, desenfoque, extensión, color e inset y vista previa en vivo. Copia el CSS listo para usar, gratis en tu navegador.

Generador CSS border-radiusGenerador de border-radius CSS con ocho controles de esquina independientes, deslizadores y vista previa en vivo de la forma redondeada. Copia el CSS listo para usar, gratis en tu navegador.

Convertidor de coloresConversor de color entre códigos HEX, RGB, HSL y OKLCH, con la relación de contraste WCAG de dos colores. Comprueba la accesibilidad mientras eliges paleta, gratis en tu navegador.

Generador de ondas SVGGenerador de ondas SVG en línea gratuito con editor visual para ondas suaves. Ajuste amplitud, colores y capas, aplique ajustes preestablecidos y copie el código CSS y SVG para fondos y divisores de sección.

Preguntas frecuentes

No hay límite, pero 2-6 es lo típico. Demasiados pueden afectar el rendimiento.

Sí. Active la casilla 'Repetir' para agregar el prefijo repeating.

Se proporcionan cinco presets: Sunset, Ocean, Forest, Midnight y Rainbow.

Actualmente, solo se produce CSS puro. La conversión a Tailwind está planificada para una actualización futura.

No. Todo el procesamiento se realiza en el navegador.