Generador de degradados

Crea degradados lineales, radiales y de malla visualmente

Crea degradados lineales o radiales con salida CSS lista para copiar y pegar.

Elige dos o más colores, ajusta el degradado a tu gusto, copia el CSS. O descárgalo como PNG para usarlo como fondo de pantalla, fondo de diapositiva o fondo de publicación en redes sociales. Se admiten degradados lineales, radiales y cónicos, además de un modo de degradado de malla para los fondos suaves estilo Apple que ves en las interfaces modernas.

Tipos de degradado explicados

Lineal: línea recta del color A al color B. Selector de dirección (de arriba a abajo, diagonal, etc.).
Radial: concéntrico: el color A en el centro se desvanece hacia el color B en los bordes. Útil para efectos de foco.
Cónico: gira alrededor de un punto central como una rueda de colores. De moda en el diseño de interfaces modernas.
Malla (premium): múltiples manchas de color combinadas suavemente. El aspecto de «degradado Apple».

Lo que puedes copiar

CSS: declaración linear-gradient(...) o background-image: lista para pegar.
Tailwind: la clase bg-gradient-* más cercana y cualquier adición de color personalizado.
SVG: para uso escalable en iconos o gráficos de interfaz.
Descarga PNG: cualquier tamaño, incluido fondo de pantalla para teléfono (1284×2778), escritorio (3840×2160) y cuadrado (1080×1080).

Casos de uso comunes

Fondos de pantalla para teléfono: los degradados de malla son muy populares en iOS. Prueba nuestra Vista previa de fondos de pantalla para iPhone para probarlos.
Fondos para publicaciones en redes sociales: aspecto instantáneo alineado con la marca para gráficos de citas.
Secciones hero: los fondos degradados están por todas partes en las páginas de aterrizaje.
Presentaciones de diapositivas: reemplaza los aburridos fondos sólidos.

Cómo elegir colores que funcionen

Los colores adyacentes en la rueda de colores = sutiles, armoniosos. Los opuestos = audaces, llamativos. Añade una tercera parada intermedia para salvar una gran distancia. Para degradados fieles a la marca, pega tu HEX de marca y elige un tinte o sombra para la segunda parada. Usa nuestro Convertidor de colores para encontrar tintes (HSL con mayor luminosidad) o sombras (menor).

Preguntas frecuentes

¿Puedo usarlos en producción?

Sí: el CSS copiado funciona en cualquier navegador moderno. Se proporcionan alternativas SVG para objetivos más antiguos.

¿Qué hay sobre la compatibilidad de gradiente radial en los navegadores?

Universal en navegadores modernos. La sintaxis CSS es de una línea.

¿Qué tan grande puedo exportar el PNG?

Gratis: hasta 4K (3840×2160). Premium: 8K y más allá.

¿Son difíciles de usar los degradados de malla?

En la web se basan en SVG o canvas. Te proporcionamos un PNG aplanado para facilitar su uso, además del código fuente SVG para editar.

¿Puedo guardar mis degradados?

Inicia sesión (gratis) y los degradados guardados aparecen en tu biblioteca.

¿Qué es un gradiente cónico?

Gira alrededor de un punto, como una rueda de colores o un gráfico circular. CSS moderno lo admite de forma nativa.

¿Funciona para gradientes animados?

Solo exportación estática. Para fondos animados, copia el CSS y agrega una animación CSS alrededor del ángulo del gradiente.

¿Por qué no simplemente escribir CSS a mano?

Puedes hacerlo — la herramienta solo hace más rápida la iteración visual. Copia y ajusta.

Acerca de Generador de degradados

Generador de degradados es una herramienta gratuita en línea de Wallpapers.com que funciona completamente en tu navegador — sin instalación, sin marca de agua, sin registro de correo electrónico para la primera prueba. Crea degradados lineales o radiales con salida CSS lista para copiar y pegar.

Cómo usar Generador de degradados

Elige un color de la paleta o pega un valor HEX / RGB.
Ajusta la salida — paleta, contraste, colores complementarios.
Copia el valor o exporta la paleta como JSON.

Cuándo usarlo

Los casos de uso comunes incluyen: preparar imágenes para subir a la web, listados de comercio electrónico, plataformas de redes sociales con restricciones de formato, y convertir archivos de un dispositivo o aplicación a otro.

Gratis vs Premium

Cada visitante obtiene una prueba gratuita; los usuarios gratuitos registrados obtienen una cuota diaria mayor. Suscríbete a Premium para ejecuciones ilimitadas, procesamiento por lotes de hasta 200 imágenes por trabajo, cola prioritaria y navegación sin anuncios.