← Contenido & SEOContent & SEO

CSS Gradient Generator

Diseña gradientes lineales, radiales o cónicos con stops arrastrables, ajusta ángulos y aplica presets rápidos para héroes, tarjetas o fondos oscuros. Copia el resultado en CSS puro o como clase Tailwind. Design linear, radial or conic gradients with draggable color stops, precise angle control and ready-made presets for hero sections, cards or dark backdrops. Copy the output as plain CSS or Tailwind.

Constructor de gradienteGradient builder
Aplica a gradientes lineales y cónicos. Applies to linear and conic gradients.
Stops de color Color stops
Haz clic en la pista para agregar un stop. Arrastra o usa las flechas para moverlos. Click the track to add a stop. Drag or use arrow keys to move them.
ResultadoResult
CSS
Tailwind

Gradients that stay on-brand Gradientes que respetan tu marca

Quickly iterate on backgrounds for hero sections, cards and dashboards while keeping full control over color stops and output formats. Itera rápidamente fondos para héroes, tarjetas y dashboards conservando control total sobre stops y formatos de salida.

  • Drag handles to fine-tune transitions or tweak the numeric position when you need pixel-perfect values. Arrastra los manejadores para afinar transiciones o ajusta la posición numérica cuando necesitas valores exactos.
  • Switch between linear, radial or conic without losing your palette—the generator adapts automatically. Cambia entre lineal, radial o cónico sin perder tu paleta; el generador se adapta automáticamente.
  • Export a clean CSS snippet or use Tailwind’s arbitrary values to reuse the gradient across components. Exporta un snippet CSS limpio o usa valores arbitrarios de Tailwind para reutilizar el gradiente en tus componentes.