Generador de degradados CSS
Funciona en esta pestaña. No se sube nada.
CSS
Cómo usar esta herramienta
Diseña un degradado CSS de fondo y copia el código. No se sube nada.
Elige un tipo o preajuste
Parte de un preajuste o de Aleatorio, luego elige lineal, radial o cónico y ajusta el ángulo o la forma.
Define los colores
Cambia cada color y arrastra su posición. Añade hasta seis colores; × quita uno.
Copia el CSS
Pulsa Copiar CSS y pégalo en tu hoja de estilos, o elige un tamaño y Guardar PNG para un fondo de pantalla.
Preguntas frecuentes
¿Cómo hago un degradado CSS?
Elige un tipo (lineal, radial o cónico), define los colores y sus posiciones y ajusta el ángulo o la forma. El CSS se actualiza sobre la marcha; pulsa Copiar CSS.
¿Qué es una parada de color?
Un color en una posición del degradado, de 0% a 100%. Añade hasta seis paradas; el degradado mezcla los colores en el orden de sus posiciones.
¿Por qué hay dos líneas de background?
La primera línea es un color sólido para navegadores muy antiguos; la segunda es el degradado. Todos los navegadores actuales usan el degradado.
¿Puedo guardar el degradado como imagen?
Sí. Elige un tamaño (escritorio, móvil, 1440p o cuadrado) y pulsa Guardar PNG. Se dibuja en tu navegador.
¿Lineal, radial o cónico?
El lineal mezcla a lo largo de una línea con un ángulo (90° es de izquierda a derecha). El radial se expande desde el centro en círculo o elipse. El cónico gira alrededor del centro como una rueda de colores.