El Generador de Gradientes CSS es una herramienta online gratuita para crear gradientes lineales, radiales y cónicos. También incluye fondos de patrones CSS y colecciones de presets. Todo el procesamiento se realiza en su navegador.
Elija una pestaña
Seleccione entre las pestañas Gradiente, Patrón o Presets.
Ajuste los parámetros
Modifique colores, ángulo, posición y forma con controles deslizantes. Vista previa en tiempo real.
Copie el código
Copie el código CSS generado con un clic. Péguelo directamente en su sitio web.
El gradiente CSS es una técnica para crear fondos degradados hermosos usando solo CSS — sin JavaScript ni imágenes. Simplemente especifique colores en la propiedad background para crear transiciones suaves entre 2 o más colores. Siempre nítido en pantallas Retina.
Tipo
Propiedad CSS
Características
Uso principal
Lineal
linear-gradient()
Cambia linealmente según un ángulo
Fondos hero, botones
Radial
radial-gradient()
Se expande radialmente desde el centro
Efectos de foco, spotlight
Cónico
conic-gradient()
El color cambia por ángulo alrededor del centro
Gráficos circulares, anillos de progreso
P. ¿Cómo cambio la dirección del gradiente?
R. Para gradientes lineales, use el control de ángulo para ajustar la dirección.linear-gradient(90deg, ...) para izquierda a derecha, linear-gradient(180deg, ...) para arriba a abajo.
P. ¿Puedo crear gradientes con 3+ colores?
R. Sí. Añada paradas de color para crear gradientes complejos con cualquier número de colores.
P. ¿Se envían datos al servidor?
R. No. Todo el procesamiento se realiza en su navegador.
🌅
Secciones hero
Gradientes lineales para vistas iniciales impactantes. Manteniendo la legibilidad del texto.
🔘
Diseño de botones
Botones con gradiente para sensación premium. Efectivo con animaciones hover.
📊
Visualización de datos
Gradientes cónicos para gráficos circulares y anillos de progreso solo con CSS.
🎨
Patrones de fondo
Patrones de fondo solo con CSS. Sin imágenes, nítido en cualquier resolución.
