Generador de Gradientes CSS Online Gratis
Crea gradientes lineales, radiales y cónicos con vista previa en tiempo real. Copia el CSS directamente. Sin registro.
CSS
background: linear-gradient(135deg, #6d28d9 0%, #06b6d4 100%);
background-image
background-image: linear-gradient(135deg, #6d28d9 0%, #06b6d4 100%); background-size: cover;
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Cómo usar el generador de gradientes CSS
- 1
Elige el tipo de gradiente
Linear para transiciones en línea recta, Radial para irradiar desde el centro, Conic para girar alrededor de un punto como en un gráfico de tarta.
- 2
Configura el ángulo
Para gradientes lineales, arrastra el deslizador o usa los atajos rápidos de ángulo. El gradiente se actualiza al instante en la vista previa.
- 3
Personaliza los colores
Haz clic en cada parada de color para cambiar el tono. Ajusta la posición (%) de cada parada con el deslizador. Añade nuevas paradas o elimina las existentes.
- 4
Copia el CSS
El código se genera automáticamente bajo la vista previa. Puedes copiar el valor de background o el de background-image según lo que necesites.
Tipos de gradientes CSS
CSS ofrece tres funciones nativas para crear gradientes. La función linear-gradient() crea una transición suave entre colores a lo largo de una línea con el ángulo que especifiques (0° es de abajo hacia arriba, 90° de izquierda a derecha, 135° en diagonal). La función radial-gradient() parte de un punto central y distribuye los colores hacia el exterior en forma de círculo o elipse, ideal para efectos de luz y brillo. La función conic-gradient() es la más moderna: rota los colores alrededor de un punto como los minutos de un reloj, perfecta para gráficas circulares, indicadores de progreso y ruedas de color.
Las paradas de color (color stops) son los puntos clave que definen qué colores aparecen y dónde. Puedes tener desde 2 hasta 6 paradas en este generador. La posición de cada parada (en porcentaje) controla dónde empieza la transición desde ese color. Si dos paradas consecutivas tienen la misma posición, se crea un cambio abrupto en lugar de una transición suave.
Preguntas frecuentes
¿Cuál es la diferencia entre un gradiente linear y uno radial?
Un gradiente lineal transiciona los colores a lo largo de una línea recta definida por un ángulo. Un gradiente radial emite los colores desde un punto central hacia el exterior en forma circular.
¿Qué es un gradiente cónico?
Rota los colores alrededor de un punto central, como los sectores de un gráfico de tarta. Ideal para ruedas de colores y efectos angulares únicos.
¿Cuántas paradas de color puedo añadir?
Hasta 6 paradas de color. Cada una tiene un selector de color y un control de posición (0%–100%).
¿El código es compatible con todos los navegadores?
Sí. linear-gradient, radial-gradient y conic-gradient son soportados por todos los navegadores modernos.
¿Puedo partir de un preset y modificarlo?
Sí. Haz clic en 'Presets', selecciona uno y sus colores y tipo se cargan automáticamente para que los personalices libremente.
Herramientas relacionadas
Incrusta Generador de Gradientes CSS en tu web
Integra Generador de Gradientes CSS en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/css-gradient-generator"
width="100%"
height="700"
frameborder="0"
title="Generador de Gradientes CSS — miguelacm.es"
></iframe>