Acerca de esta herramienta
Este generador dibuja fondos con degradados CSS lineales o radiales. Cada parada tiene un color y una posición porcentual independientes. Añade o elimina paradas para observar cómo cambia la transición.
Cómo usarla
- Elige un degradado lineal o radial.
- Configura entre 2 y 6 paradas de color con posiciones de 0 a 100%.
- En degradados lineales, ajusta el ángulo entre 0 y 360°; el deslizador y el campo numérico se sincronizan.
- Comprueba la vista previa y copia el CSS. Usa «Restablecer» o «Cargar ejemplo» para comparar combinaciones.
Ejemplos de uso
- Rojo al 0% y azul al 100% forman un degradado básico de dos colores.
- Añadir un tercer color al 50% modifica la transición central.
- Las paradas en la misma posición permiten crear límites de color definidos.
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
background: radial-gradient(circle, #ffffff 0%, #000000 100%);Funcionamiento y explicación del CSS
linear-gradient() interpola entre paradas en una dirección; radial-gradient() realiza la transición desde el centro hacia fuera. Los colores se validan como HEX opacos y las posiciones se limitan por porcentaje antes de generar una declaración background válida.
Usos habituales
- Diseñar fondos web y colores para botones.
- Comparar rápidamente direcciones de degradados multicolor.
- Aprender cómo la posición de las paradas afecta a la transición.
Privacidad
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
FAQ
¿Qué diferencia hay entre linear-gradient y radial-gradient?
El degradado lineal sigue una línea recta; el radial se extiende desde el centro, normalmente en forma de círculo o elipse.
¿Un degradado CSS es una imagen?
Es una imagen CSS generada por el navegador. No necesita descargar un archivo de imagen ni usar un servicio en línea.
¿Cómo cambio la dirección de un degradado lineal?
Modifica el ángulo: 0deg apunta hacia arriba, 90deg hacia la derecha y 180deg hacia abajo.
¿Puedo usar más de tres colores?
Sí. Se admiten 2–6 paradas, cada una con su propio color y posición.