Generador de Gradientes
El generador de degradados CSS crea degradados lineales, radiales y cónicos a partir de dos o tres colores, con vista previa en vivo y CSS de background listo para copiar.
Acerca de esta herramienta
El generador de degradados CSS crea degradados lineales, radiales y cónicos a partir de dos o tres colores, con vista previa en vivo y CSS de background listo para copiar.
Cómo se usa
- Elige el tipo de degradado: lineal, radial o cónico.
- Ajusta el ángulo con el control deslizante (0–360°).
- Elige dos colores, o marca Usar 3 colores para añadir un tercero.
- Haz clic en Copiar CSS y pega la regla background en tu hoja de estilos.
Datos útiles
- linear-gradient() mezcla colores a lo largo de una línea recta definida por un ángulo, donde 90deg va de izquierda a derecha.
- radial-gradient(circle, …) expande los colores hacia fuera desde el centro.
- conic-gradient(from <angle>, …) hace girar los colores alrededor de un punto central, algo útil para gráficos circulares y círculos cromáticos.
- Los degradados CSS son imágenes que genera el navegador, así que se escalan a cualquier tamaño sin añadir peso de archivo.
- Las tres funciones de degradado son compatibles con todos los navegadores principales actuales.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo hago un degradado en CSS?
Usa una función de degradado como fondo, por ejemplo background: linear-gradient(135deg, #1db954, #0a1628). Esta herramienta te escribe esa línea con los colores y el ángulo que elijas.
¿Qué diferencia hay entre degradados lineales, radiales y cónicos?
Los lineales cambian de color a lo largo de una línea, los radiales se irradian desde un punto central y los cónicos giran alrededor de un centro como las agujas de un reloj.
¿Puede un degradado tener más de dos colores?
Sí. Los degradados CSS admiten cualquier número de paradas de color. Este generador admite dos o tres colores; puedes añadir más paradas a mano en el CSS copiado.
¿Los degradados CSS ralentizan un sitio web?
No de forma apreciable. Los dibuja el navegador y no requieren descargar imágenes, así que suelen ser más ligeros que los archivos de imagen con degradados.