Cómo funciona
El Generador de degradados crea declaraciones de degradado CSS (lineales, radiales o cónicas) desde un editor visual con paradas de color, control del ángulo y vista previa en vivo, y te devuelve la propiedad background completa.
Los degradados CSS sustituyeron a los fondos con imágenes en el diseño web moderno: son independientes de la resolución y se pueden ajustar a voluntad. La sintaxis tiene 3 variantes: linear-gradient() para degradados con dirección, radial-gradient() para explosiones circulares o elípticas y conic-gradient() para transiciones en forma de rueda de color.
Cómo usarlo: elige el tipo de degradado (lineal, radial o cónico). Añade paradas de color haciendo clic en la barra del degradado; cada parada tiene su selector de color y su control de posición. Arrastra las paradas para reordenarlas. Fija el ángulo de los degradados lineales (de 0 a 360°) con la rueda visual o escribiendo el valor. En los radiales, configura el punto central y la forma (círculo o elipse). Pulsa Copiar para llevarte el CSS completo.
Opciones avanzadas: coloca dos paradas de color en la misma posición para conseguir un corte neto, sin mezcla. Usa transparent como color de parada para efectos de desvanecido. La herramienta genera también la versión con prefijo -webkit- junto a la propiedad estándar, para máxima compatibilidad.
Resultado CSS: el generador produce la declaración completa background: linear-gradient(...) lista para pegar en tu hoja de estilos. También muestra la variante con background-image, por si quieres combinarla con un background-color de respaldo.
Preguntas frecuentes
- Un degradado cónico recorre los colores alrededor de un punto central, como una rueda de color o un gráfico de tarta. conic-gradient(red, yellow, green, blue, red) crea una rueda con todo el espectro. Se usan para gráficos circulares, porciones de tarta y efectos de rueda de color.
- Coloca dos paradas de color en la misma posición. Por ejemplo, linear-gradient(red 50%, blue 50%) da una división exacta en mitad roja y mitad azul, sin transición.
- Son equivalentes: to right = 90deg, to top = 0deg, to bottom = 180deg y to left = 270deg. El sistema de grados da más precisión en los degradados diagonales: 45deg va de la esquina inferior izquierda a la superior derecha.
- Sí. Los lineales y radiales están totalmente admitidos en todos los navegadores modernos. Los cónicos funcionan en Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+. La herramienta genera también las versiones con prefijo -webkit- para navegadores WebKit antiguos.
¿Qué es un degradado cónico?
¿Cómo hago un corte de color sin mezcla?
¿Qué diferencia hay entre 'to right' y '90deg' en un degradado lineal?
¿Los degradados CSS funcionan en todos los navegadores?
Scrollshot — Full Page Screenshot & Annotate
Scrolls the page for you, captures it viewport by viewport and stitches the slices into one seamless image — then opens an editor so you can crop, annotate and blur before saving.