Generador de Degradados
Generador de degradados CSS gratuito en línea. Cree degradados lineales, radiales y cónicos con vista previa en vivo. Copie el código CSS al instante.
Cree degradados CSS hermosos de forma visual — lineales, radiales y cónicos con personalización completa.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Generador de Gradientes CSS Gratis — Crea Gradientes Lineales, Radiales y Cónicos
Diseña hermosos gradientes CSS con este generador de gradientes en línea gratuito. Elige entre gradientes lineales, radiales y cónicos, personaliza colores y ángulos, y copia el código CSS instantáneamente.
¿Qué es un gradiente CSS?
Un gradiente CSS es una transición suave entre dos o más colores, creada utilizando la propiedad background en CSS. Los gradientes eliminan la necesidad de archivos de imagen, reduciendo el tiempo de carga de la página y permitiendo fondos completamente responsivos e independientes de la resolución.
Hay tres tipos principales de gradientes CSS:
- Gradientes lineales transicionan colores a lo largo de una línea recta, definida por un ángulo o dirección.
- Gradientes radiales se irradian desde un punto central, creando patrones circulares o elípticos.
- Gradientes cónicos transicionan colores alrededor de un punto central en un barrido rotacional, similar a una rueda de colores.
Cómo usar este generador de gradientes
- Elige un tipo de gradiente — Selecciona Lineal, Radial o Cónico en la parte superior del panel de controles.
- Establece la dirección — Para gradientes lineales y cónicos, ajusta el ángulo usando el deslizador o los botones de selección rápida.
- Personaliza las opciones radiales — Para gradientes radiales, elige una forma (círculo o elipse) y una palabra clave de tamaño.
- Edita los puntos de color — Haz clic en el selector de color para cambiar el color de cada punto. Arrastra el deslizador de posición para ajustar dónde aparece cada color.
- Añade o elimina colores — Usa el botón "Añadir color" para más puntos (hasta 8), o haz clic en X para eliminar un punto (mínimo 2).
- Prueba un preajuste — Haz clic en cualquier cuadro de preajuste para cargar un gradiente listo para usar.
- Copia el CSS — Haz clic en "Copiar CSS" para copiar la propiedad
backgroundcompleta a tu portapapeles.
Características clave
| Característica | Beneficio |
|---|---|
| Tres tipos de gradientes | Lineal, radial y cónico — todos los modos de gradientes CSS soportados |
| Vista previa en vivo | Ve tu gradiente actualizado en tiempo real al ajustar los ajustes |
| Hasta 8 puntos de color | Crea gradientes multicolor complejos con posicionamiento preciso |
| Control de ángulo | Deslizador + botones de selección rápida para ángulos comunes (0°–315°) |
| Forma y tamaño radial | Formas de círculo/elipse con cuatro palabras clave de tamaño CSS |
| Preajustes de un solo clic | Seis preajustes curados para comenzar rápidamente |
| Copiar código CSS | Un clic para copiar código CSS listo para producción a tu portapapeles |
| No se envía datos | Todo funciona en tu navegador — sin servidor, sin seguimiento |
Comparación de tipos de gradientes
| Propiedad | Lineal | Radial | Cónico |
|---|---|---|---|
| Dirección | Ángulo (0–360°) | Forma + palabra clave de tamaño | Ángulo de inicio |
| Patrón | Línea recta | Círculo o elipse desde el centro | Barrido rotacional |
| Mejor para | Fondos, banners, botones | Luces, esferas, arte abstracto | Gráficos de pastel, ruedas de color, relojes |
| Función CSS | linear-gradient() |
radial-gradient() |
conic-gradient() |
Casos de uso reales
Fondos de sitio web
Reemplaza colores planos con gradientes sutiles para páginas modernas y profesionales. Un suave gradiente lineal de 135° con dos colores cercanos aporta profundidad sin distracción.
Botones y CTAs
Haz que los botones de llamada a la acción destaquen con gradientes vibrantes. Usa un gradiente de 180° (de arriba a abajo) para un efecto natural de luz a sombra.
Secciones hero
Crea banners hero llamativos con gradientes multicolor audaces. Combina tres o más colores para un aspecto de marca único.
Superposiciones y tarjetas
Aplica gradientes semitransparentes sobre imágenes para garantizar la legibilidad del texto mientras se mantiene el interés visual.
Visualización de datos
Usa gradientes cónicos para crear gráficos de pastel, anillos de progreso o ruedas de color sin JavaScript o SVG.
Consejos para gradientes mejores
- Limita a 2–3 colores para diseños limpios y profesionales. Más puntos pueden funcionar pero requieren ajustes cuidadosos.
- Usa tonos similares para gradientes sutiles (ej: azul claro a azul oscuro) y colores complementarios para gradientes audaces.
- Ajusta el ángulo según el diseño — 180° funciona bien para secciones verticales, 90° para barras horizontales.
- Prueba en temas oscuros y claros — Un gradiente que se ve bien en un fondo blanco puede necesitar ajustes en modo oscuro.
- Usa
background-sizeybackground-repeatpara mosaico gradientes pequeños en patrones. - Combina con transparencia — Usa valores
rgba()para crear gradientes que se fusionen con el contenido subyacente.
Entendiendo la sintaxis de gradientes CSS
Un gradiente lineal básico:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Un gradiente radial con forma y tamaño:
background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);
Un gradiente cónico:
background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);
Todos los navegadores modernos soportan estos tipos de gradientes sin prefijos de proveedor.
Preguntas frecuentes
¿Cuántos colores puedo usar en un gradiente CSS?
CSS soporta cualquier número de puntos de color. Esta herramienta permite hasta 8 para uso práctico. En proyectos reales, 2–4 puntos son más comunes.
¿Cuál es la diferencia entre gradientes lineales y radiales?
Los gradientes lineales transicionan colores a lo largo de una línea recta en un ángulo especificado. Los gradientes radiales transicionan colores desde un punto central en forma circular o elíptica.
¿Los gradientes CSS funcionan en todos los navegadores?
Sí. Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan completamente linear-gradient, radial-gradient y conic-gradient sin prefijos de proveedor.
¿Puedo animar gradientes CSS?
CSS no puede animar directamente entre valores de gradiente usando transiciones. Sin embargo, puedes animar la posición del gradiente usando background-position o usar @property de CSS para animaciones de propiedades personalizadas en navegadores compatibles.
¿Cómo hago un gradiente transparente?
Usa valores rgba() o hsla() con un canal alfa. Por ejemplo, rgba(102, 126, 234, 0.5) te da una versión semitransparente del color.
¿Esta herramienta almacena mis datos de gradientes?
No. La generación de gradientes ocurre completamente en tu navegador. No se envía ningún dato a ningún servidor.