Generador de gradientes
Crea gradientes CSS y míralos en directo mientras los ajustas.
Qué hace esta herramienta
Generador de gradientes CSS con vista previa en directo. Elige dos colores, el tipo de gradiente (lineal, radial o cónico) y el ángulo. La regla CSS aparece lista para copiar.
¿Aún no tienes los colores? Empieza por generador de paletas o pasa cualquier valor por el conversor de colores.
Para qué te sirve
- Crear rápido un fondo hero para una landing.
- Generar un degradado para un botón o una tarjeta destacada.
- Probar combinaciones de colores antes de elegir una paleta.
- Generar un gradiente listo para Tailwind o para una variable de tema.
Cómo se usa
- Selecciona el color inicial y el color final.
- Elige el tipo de gradiente: lineal, radial o cónico.
- Si es lineal, ajusta el ángulo en grados.
- Copia la regla CSS o el preview HTML que aparece debajo.
Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.
Presets de degradados que funcionan
Si no sabes por dónde empezar, prueba estos degradados. Cada uno encaja con un uso concreto y son combinaciones probadas.
Sunset
#F97316 → #EF4444 · 135°
Heros cálidos, llamadas a la acción de venta.
Lima ácida
#A3E635 → #22C55E · 135°
Producto saludable, fintech verde, dashboards.
Océano
#0EA5E9 → #1E40AF · 90°
Tecnología, SaaS B2B, fondos profesionales.
Lavanda
#A78BFA → #EC4899 · 45°
Branding creativo, beauty, cripto.
Carbón
#1F2937 → #4B5563 · 180°
Modo oscuro, fondos sobrios y elegantes.
Mango
#FBBF24 → #F97316 · 135°
Food and beverage, gradientes joviales.
Combina bien con
Otras herramientas que la gente suele usar en el mismo flujo.
Otras herramientas del mismo campo
DiseñoPreguntas frecuentes
¿Qué diferencia hay entre gradiente lineal, radial y cónico?
El lineal interpola colores a lo largo de un eje recto. El radial expande el color desde un punto central hacia fuera. El cónico gira los colores alrededor de un punto, como las ruedas de color de Photoshop. Cada uno encaja en escenas distintas.
¿Cómo elijo el ángulo de un gradiente lineal?
0 grados va de abajo a arriba, 90 grados de izquierda a derecha, 180 de arriba a abajo y 270 de derecha a izquierda. Los grados intermedios crean diagonales suaves. Para un look moderno, 135 o 45 suelen funcionar.
¿Puedo usar el CSS generado directamente?
Sí. La salida es una propiedad background-image lista para pegar en tu hoja de estilos o en una variable CSS personalizada.
¿Funciona con más de dos colores?
Por simplicidad esta versión usa dos colores. Si necesitas un gradiente con más paradas, copia la regla generada y añade los pasos adicionales tú mismo en la regla CSS.