Un hero con gradiente sutil
CSS
.hero { background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}Gradiente diagonal de dos colores. El típico look de hero de SaaS indie: agradable a la vista y amable con el texto encima.
Generador de gradientes CSS
Diseña gradientes CSS visualmente con código en vivo.
Última actualización
Vista previa2 paradas
Paradas de color
- 0%
- 100%
CSS
background: linear-gradient(135deg, #b18cff 0%, #5ac8c8 100%);¿Qué es un generador de gradientes CSS?
Un generador de gradientes CSS es un editor visual para las funciones linear-gradient, radial-gradient y conic-gradient de CSS. Te ahorra escribir paradas de color a mano: arrastras los colores sobre una pista, ves la vista previa actualizarse al instante y copias un CSS listo para producción que pegas tal cual en tu hoja de estilos.
Los gradientes están en todas partes en la UI moderna: secciones hero, overlays de tarjetas, estados de botones, efectos de glow, sutilezas en modo oscuro, esqueletos de carga y bordes decorativos. Saber leer y escribir un gradiente a mano te hace más rápido, pero un generador visual no tiene rival a la hora de bocetear ideas.
CSS soporta tres tipos de gradiente. El *lineal* recorre una línea recta en cualquier ángulo. El *radial* se expande desde un punto formando un círculo o una elipse. El *cónico* hace girar los colores alrededor de un centro, como las manecillas de un reloj. Cada uno tiene sus casos de uso, y puedes combinar varios gradientes en un mismo fondo.
Lo que aprenderás diseñando gradientes
- Un gradiente se define por su *dirección* (o forma) y sus *paradas de color*: colores con una posición opcional.
- Dos paradas de color en la misma posición crean un *borde duro*, ideal para rayas o fondos divididos.
- Espacios de color modernos como
oklchproducen gradientes más suaves y perceptualmente uniformes quergbohsl.
Cómo construir un gradiente CSS paso a paso
Elige el tipo de gradiente
Usa lineal para un barrido recto de color, radial para un fundido circular o cónico para un giro alrededor de un punto central.
Define el ángulo o la posición
Para el lineal, elige un ángulo en grados (
0degva de abajo hacia arriba en CSS). Para el radial y el cónico, ajusta la posición del centro.Añade y ordena las paradas de color
Agrega tantos colores como quieras. Arrastra cada parada por la pista para mover su posición. Dos paradas en la misma posición producen un borde duro.
Previsualiza sobre una forma real
Alterna entre un hero a ancho completo, una tarjeta y un botón para ver cómo cae el gradiente con distintas proporciones.
Copia el CSS
Copia la declaración
backgroundlista para producción y pégala en tu hoja de estilos.
Referencia rápida de gradientes CSS
Las tres funciones de gradiente y las piezas que van dentro. Referencia completa en MDN: linear-gradient, radial-gradient, conic-gradient.
| Función | Para qué sirve | Ejemplo |
|---|---|---|
linear-gradient | Barrido de color a lo largo de una línea | linear-gradient(135deg, #6c8cff, #b18cff) |
radial-gradient | El color irradia desde un punto | radial-gradient(circle at 30% 20%, #fff, #000) |
conic-gradient | El color gira alrededor de un centro | conic-gradient(from 0deg, red, yellow, red) |
repeating-linear-gradient | Patrón de rayas en mosaico | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) |
| Parada de color | Un color con posición opcional | #6c8cff 25% |
| Parada dura | Misma posición dos veces → borde nítido | #000 50%, #fff 50% |
| Varios gradientes | Apilados en un mismo elemento | background: g1, g2, g3; |
Ejemplos de gradientes CSS para probar
Un foco radial
CSS
.card { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%), #1f2230;}Apila un destello radial translúcido sobre un color sólido para simular una fuente de luz suave: ideal para tarjetas en modo oscuro.
Rayas con paradas duras
CSS
.stripes { background: repeating-linear-gradient( 45deg, #1a1a1a 0 12px, #2a2a2a 12px 24px );}Dos paradas en la misma posición generan un borde nítido. Envolverlo en repeating-linear-gradient repite el patrón en mosaico.
Errores comunes con los gradientes CSS
- Usar demasiadas paradas de color: con tres o cuatro suele bastar; añadir más suele enturbiar el resultado.
- Olvidar que en los gradientes CSS
0degva de abajo hacia arriba (a diferencia de muchas herramientas de diseño, donde 0° apunta a la derecha). - Poner texto sobre un gradiente de alto contraste sin comprobar la legibilidad en ambos extremos: ten siempre presente el contraste WCAG.
Preguntas frecuentes sobre gradientes CSS
¿Cómo creo un gradiente en CSS?
Usa
linear-gradient, radial-gradient o conic-gradient como valor de una propiedad background o background-image. Cada función recibe una dirección (o un centro) y una lista de paradas de color.¿Qué diferencia hay entre los gradientes lineales, radiales y cónicos?
Los lineales recorren los colores a lo largo de una línea recta. Los radiales irradian desde un punto formando un círculo o una elipse. Los cónicos hacen girar los colores alrededor de un centro, como las manecillas de un reloj.
¿Puedo animar un gradiente CSS?
Los navegadores no interpolan entre imágenes de gradiente de forma fluida. Los trucos habituales son animar
background-position para conseguir un gradiente en movimiento, hacer una transición de opacidad entre dos capas de gradiente, o animar custom properties de CSS usadas como paradas de color.¿Por qué se ve banding en mi gradiente?
El banding aparece cuando hay pocos pasos de color discretos repartidos por una zona muy amplia. Añade paradas intermedias, cambia a un espacio de color perceptual como
oklch o aplica una capa sutil de ruido (dithering).¿Los gradientes CSS funcionan en todos los navegadores?
Los gradientes lineales y radiales tienen soporte universal. Los cónicos están soportados en todos los navegadores modernos. Para navegadores muy antiguos conviene declarar un
background-color sólido como fallback antes del gradiente.