CSS Gradient
Genera gradientes CSS lineales y radiales con vista previa en vivo
Acerca de CSS Gradient
Transforma dos o más paradas de color en un gradiente CSS lineal o radial, cada una con un color HEX y una posición en porcentaje, y muestra el resultado en vivo mientras lo ajustas. Los gradientes lineales admiten un ángulo de 0 a 360 grados y los radiales se dibujan como un círculo centrado. El botón Copiar entrega una declaración background completa, lista para pegar en tu hoja de estilos.
Categoría: Color.
Preguntas frecuentes
¿Qué tipos de gradientes CSS son compatibles?
▾
Gradientes lineales con cualquier ángulo entero de 0 a 360 grados y gradientes radiales dibujados como un círculo centrado con radial-gradient(circle, ...). No genera gradientes cónicos, elípticos ni repetidos.
¿Cómo agrego o quito paradas de color?
▾
Haz clic en Add para añadir una parada, sin límite máximo, y usa el ícono de papelera para eliminar una; siempre quedan al menos dos. Cada parada tiene un color HEX y una posición de 0% a 100%, y se escriben en el orden de la lista, así que mantén las posiciones en orden creciente y da la misma posición a dos paradas vecinas para crear un borde de color nítido.
¿Necesito agregar prefijos de proveedor?
▾
No. La herramienta genera la sintaxis estándar sin prefijos de linear-gradient() y radial-gradient(), compatible con todos los navegadores modernos. Las versiones con prefijo -webkit- solo importan en navegadores de hace más de una década.
¿Puedo usar colores transparentes?
▾
No desde el editor: cada parada acepta un color HEX de 6 dígitos, así que todos los colores son opacos. Después de copiar el CSS puedes editar una parada a mano, por ejemplo con transparent, un HEX de 8 dígitos como #6d28d980 o un valor rgb() con alfa.