Puntos de color
Salida CSS
Ajustes preestablecidos
Haz clic en un tema para cargar instantáneamente un degradado preconfigurado.
Cómo funciona y sintaxis CSS
Esta herramienta construye visualmente las propiedades background-image estándar de CSS utilizando funciones de degradado. A medida que añades colores y cambias posiciones, el generador calcula la sintaxis precisa necesaria para los navegadores modernos.
Degradados lineales
Un degradado lineal transiciona colores a lo largo de una línea recta. La sintaxis es:
linear-gradient(ángulo, color1 posición1, color2 posición2, ...)
El ángulo determina la dirección (por ejemplo, 90deg va de izquierda a derecha). La posición determina dónde el color alcanza su forma más pura (del 0% al 100%).
Degradados radiales
Un degradado radial transiciona colores hacia afuera desde un punto central. La sintaxis es:
radial-gradient(forma at posición, color1 pos1, color2 pos2, ...)
La forma puede ser un circle (círculo) o una ellipse (elipse). Esta herramienta establece por defecto la posición en el center (centro) del elemento.
Degradados cónicos
Un degradado cónico transiciona colores rotados alrededor de un punto central, como un gráfico circular. La sintaxis es:
conic-gradient(from ángulo at center, color1 pos1, color2 pos2, ...)
Los degradados cónicos son excelentes para crear ruedas de colores, gráficos circulares y patrones angulares complejos.