Generador de Gradientes CSS
Crea gradientes lineales o radiales y expórtalos como CSS, Tailwind o PNG.
Use this CSS gradient generator to build linear or radial gradients with full control over color stops, angle, and sizing. Start from a preset palette or build your own, then copy clean CSS or Tailwind classes for immediate use in design systems. Need static exports? Set the exact output size and download PNGs that match your hero, banner, or background dimensions. The live preview makes it easy to align brand colors, and the export tools keep your workflow fast—no plug‑ins, no uploads, and no login required.
Controles
Presets
0°90°180°270°360°
Tamaño de la Imagen
Útil para la alineación al editar. Las imágenes exportadas siempre coinciden con los colores visibles.
Exportar
Code Preview
.gradient {
background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]Vista previa
1920×1080
Paradas de Color
0%50%100%
Edit Color Stop
Cómo usar
- • Arrastra los puntos de color en la línea de tiempo para ajustar las posiciones
- • Haz clic en los puntos para seleccionarlos y editar sus colores
- • Elige entre paletas predefinidas para esquemas de color rápidos
- • Ajusta el ángulo o la forma del degradado en Controles
- • Exporta como imagen PNG o copia el código CSS/Tailwind