Generador de degradados CSS
Construye degradados CSS lineales y radiales con vista previa en vivo.
Elige lineal o radial, arrastra el ángulo, edita las paradas con su porcentaje. La vista previa se actualiza y el CSS está a un clic.
background: linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);
Cómo usarla
Elige lineal o radial
Lineal lleva ángulo; radial se centra en el elemento.
Edita las paradas
Haz clic en una muestra para el color; ajusta el porcentaje. Añade/elimina con los botones.
Copia el CSS
La declaración `background:` está lista para pegar.
¿Qué es?
Un generador de degradados CSS construye la cadena linear-gradient(...) o radial-gradient(...) a partir de una lista de paradas. Cada parada tiene un color y una posición; CSS interpola entre paradas consecutivas. La salida es una declaración `background:`.
Cuándo usarla
Fondos de hero, highlights de botones, fondos de tarjetas, separadores ilustrativos, sistemas de marca que buscan profundidad sutil sin imagen, acentos en modo oscuro.
Errores comunes
Demasiadas paradas muy juntas - el degradado se ve cargado. Complementarios saturados (rojo/verde) al 50% - centro perceptual turbio salvo que añadas un punto neutro. Y olvidar un `background-color` de respaldo.
Preguntas frecuentes
- ¿Por qué mi degradado se ve con bandas?
- Los degradados CSS interpolan en sRGB, lo que puede dar un medio « turbio » entre dos colores saturados. Usa la sintaxis OKLCH (linear-gradient(in oklch, ...)) para gradientes perceptualmente uniformes en navegadores modernos.