Qué es Generador de Gradientes CSS?
El Generador de Gradientes CSS es una herramienta visual para crear fondos con gradientes CSS sin memorizar la sintaxis. Usted elige el tipo de gradiente, selecciona colores y sus posiciones, y ajusta el ángulo. Una vista previa en vivo muestra el gradiente en tiempo real.
Respuesta rápida
Cree gradientes CSS lineales, radiales y cónicos visualmente con vista previa en vivo. Agregue hasta tres paradas de color con porcentajes de posición, ajuste el ángulo y active el modo de repetición. Copie la propiedad CSS background directamente.
Last updated: 2026-06-11
Limitaciones
- Esta herramienta admite tres paradas de color para simplicidad.
- Los gradientes radiales solo se generan en forma circular.
- La herramienta no genera CSS con prefijos de proveedor (-webkit-, -moz-).
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Seleccione el tipo de gradiente: Lineal (línea recta), Radial (circular desde el centro) o Cónico (rotación de rueda de color).
- Establezca el ángulo para controlar la dirección del gradiente. Para lineal, 0deg es de abajo hacia arriba.
- Elija dos o tres colores y establezca sus porcentajes de posición. 0% al inicio, 100% al final.
- Active el gradiente repetido para salida con patrones. Copie la propiedad CSS background en su hoja de estilos.
Para qué puedes usarla
- Diseñar un fondo de sección hero moderno con un gradiente diagonal azul a violeta a 135 grados.
- Crear un gradiente cónico para un gráfico circular que gira alrededor de un punto central.
- Construir un fondo de patrón de rayas usando repeating-linear-gradient con posiciones de color ajustadas.