Crea degradados CSS de forma visual. Configura los puntos de color, la opacidad y las posiciones para degradados lineales, radiales y cónicos, y copia el código CSS listo para usar.
Los degradados CSS son imágenes generadas por el navegador a partir de una descripción matemática, en lugar de un archivo rasterizado. Los tres tipos principales son: lineal (transiciones de color a lo largo de una línea recta), radial (transiciones hacia fuera desde un punto central) y cónico (transiciones alrededor de un punto central según el ángulo). Cada tipo admite cualquier número de paradas de color, cada una con un valor de opacidad opcional y una posición explícita o automática.
Selecciona un tipo de degradado y, a continuación, configura los puntos de color mediante el selector de color y los controles de opacidad. Para los degradados lineales, establece el ángulo o utiliza un atajo de dirección. Para los degradados radiales y cónicos, establece la posición central y el tamaño o el ángulo inicial. La vista previa se actualiza en tiempo real. Cuando el degradado te parezca correcto, copia la propiedad CSS generada y pégala directamente en tu hoja de estilos. También puedes pegar una cadena de degradado existente en el panel «Importar» para editarla.
Los degradados CSS eliminan la necesidad de utilizar archivos de imagen para fondos y elementos decorativos, lo que reduce el peso de la página y mantiene la nitidez de los colores a cualquier resolución. Utiliza el control de opacidad para crear paradas de color semitransparentes que permitan crear efectos de «glassmorphism» o para que un color sólido se desvanezca gradualmente hasta volverse transparente. El tipo de degradado cónico resulta útil para crear indicadores de progreso al estilo de un gráfico circular sin necesidad de JavaScript.