Creador de degradados CSS
Diseña un degradado lineal, radial o cónico, copia el código CSS y descárgalo como imagen PNG.
Colores del degradado
Todo funciona en tu navegador: no se envía ningún dato.
Sobre esta herramienta
Este creador de degradados CSS te permite componer de forma visual un degradado lineal, radial o cónico y obtener el código CSS listo para pegar. Elige de 2 a 6 colores, coloca cada uno donde quieras y ajusta el ángulo: la vista previa se actualiza al momento. Práctico para el fondo de una web, un botón, un banner o una imagen para redes sociales.
El código generado incluye una primera línea con un color sólido de respaldo y después el degradado. Los botones Invertir y Aleatorio te ayudan a probar ideas rápidamente. También puedes descargar el degradado como imagen PNG en 1920 × 1080, 1080 × 1080, 1080 × 1920 o 3840 × 2160 px, y compartir tu creación con un enlace que contiene sus colores.
- Degradados lineales, radiales o cónicos
- De 2 a 6 colores con posición ajustable
- Ángulo de 0 a 360° en pasos de 5°
- Código CSS con color sólido de respaldo
- Exportación PNG hasta 3840 × 2160 px
Cómo usarla
- Elige el «Tipo de degradado» y ajusta el «Ángulo».
- Define los «Colores del degradado» y su posición; añade más si hace falta.
- Pulsa «Copiar» para obtener el código CSS.
- O elige un tamaño y pulsa «Descargar PNG».
Preguntas frecuentes
¿Se envían mis colores a algún sitio?
No. El degradado se calcula y se dibuja en tu navegador y no se envía ningún dato. Los colores solo quedan en la dirección de la página para el enlace para compartir.
¿El creador de degradados es gratis?
Sí, es gratuito y funciona sin cuenta ni registro.
¿Cómo uso el código CSS del degradado?
Copia las dos líneas background y pégalas en la regla CSS de tu elemento. La primera aplica un color sólido si el navegador no admite el degradado y la segunda aplica el degradado.
¿La imagen PNG lleva alguna marca?
Sí, el PNG descargado lleva una pequeña mención discreta «kspnai.com/tools/gradient-maker» con el logo de KSPNAI abajo a la derecha. El código CSS copiado no lleva ninguna marca.