Generador de Degradados
Generar degradado lineal o radial
Ajustes
Vista previa
background: linear-gradient(90deg, #fa8072 0%, #c8fff1 100%);
Acerca de la herramienta
Este generador escribe la propiedad CSS background de un degradado lineal (linear-gradient) o radial (radial-gradient). Sirve para montar el fondo de un banner, un botón o una sección sin abrir un programa de diseño. La vista previa se actualiza con cada ajuste y el código que aparece justo debajo corresponde exactamente a lo que ves.
Cada color es una parada del degradado, situada entre 0 y 100 %. Puedes añadir tantas como necesites y quitarlas mientras queden al menos dos. En modo lineal, el ángulo va de 0 a 360 grados; en modo radial, el degradado forma un círculo cuya posición horizontal del centro ajustas tú. Tus ajustes se guardan en el navegador.
Cómo usarla
- Elige el tipo de degradado: Lineal o Radial.
- Ajusta el Ángulo (°) para un degradado lineal, o la Posición del centro (%) para uno radial.
- Elige cada color y su Posición (%), y pulsa Agregar Color para añadir otra parada.
- Comprueba el resultado en la Vista previa y pulsa Copiar CSS.
Preguntas frecuentes
¿Qué código CSS genera la herramienta?
Una sola declaración background con linear-gradient(ángulo, colores) o radial-gradient(circle at x %, colores). Cada color se escribe en hexadecimal seguido de su posición en porcentaje. Pega la línea en la regla CSS del elemento que quieras decorar.
¿Cuántos colores puede tener un degradado?
Como mínimo dos, sin un máximo fijo. El botón Agregar Color crea una parada blanca situada en el 100 %, que luego puedes modificar. Solo se puede eliminar un color si quedan más de dos en el degradado.
¿Se pueden usar colores semitransparentes?
No directamente: los colores se eligen con el selector del navegador en formato hexadecimal de seis dígitos, así que son opacos. Para conseguir transparencia, sustituye un color del código copiado por un valor rgba() o por la palabra clave transparent.
¿Se envían mis ajustes a un servidor?
No. El degradado y su código se calculan en tu navegador, sin ninguna petición de red. Los colores, posiciones y ángulos solo se guardan en el almacenamiento local del navegador para recuperarlos en tu próxima visita.