Generador de Gradientes CSS
Crea gradientes CSS online con vista previa en vivo: lineal, radial y cónico. Copia el código para tu fondo, gratis y en tu navegador.
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 la vista previa 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°
Alimentación y bebidas, gradientes joviales.
Combina bien con
Otras herramientas que la gente suele usar en el mismo flujo.
- Generador de Paletas de Color
generar paletas de colores
Para elegir los colores del degradado.
- Conversor de Color: HEX, RGB, HSL
convertir colores entre HEX, RGB y HSL
Para elegir los colores del degradado.
- Verificar Contraste de Color (WCAG)
comprobar el contraste de color WCAG
Una vez tienes el color base.
- Generador de sombras CSSEn camino
crear sombras CSS
Una vez tienes el color base.
- Generador de border radius CSS
crear esquinas redondeadas CSS
Una vez tienes el color base.
Otras herramientas del mismo campo
DiseñoGenerador de Paletas de Color
Genera paletas de color armónicas a partir de cualquier color base: análogas, complementarias y más. Gratis, en tu navegador, listas para copiar.
Conversor de Color: HEX, RGB, HSL
Convierte colores entre HEX, RGB y HSL online. Pega cualquier formato y obtén los demás al instante. Gratis, sin subidas y en tu navegador.
Verificar Contraste de Color (WCAG)
Comprueba el contraste de color WCAG entre texto y fondo, con vistas previas en vivo, resultado aprobado o suspenso y sugerencias accesibles.
Generador de border radius CSS
Crea un border-radius en CSS con vista previa: redondea cada esquina por separado en píxeles o porcentaje y copia el código. Gratis y en tu navegador.
Preguntas 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.