Generador de fondos de pantalla con degradado gratuito

Acerca de los degradados

Los degradados CSS permiten crear transiciones de color fluidas sin imágenes, lo que reduce el tamaño de los archivos y mejora el rendimiento. Esta herramienta genera tanto archivos PNG para usar como fondos de pantalla como código CSS reutilizable en un sitio.

Preguntas frecuentes

¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?

Los degradados lineales fluyen en línea recta según un ángulo especificado. Los degradados radiales irradian desde un punto central. Los degradados cónicos giran alrededor de un punto central como una rueda cromática. Cada uno produce un efecto visual distinto.

¿Puedo usar los degradados CSS en mi sitio?

¡Sí! Los degradados CSS están admitidos por todos los navegadores modernos y no requieren imágenes. Se adaptan a todos los tamaños, se cargan más rápido y se mantienen nítidos en cualquier pantalla. Copia el CSS generado por esta herramienta en tus hojas de estilo.

¿Cuáles son las mejores resoluciones según mi dispositivo?

Los monitores de escritorio suelen usar 1920×1080, los portátiles varían, las pantallas 4K usan 3840×2160, los iPhone 1080×1920 y los iPad 2048×2732. Elige la resolución que corresponda a tu dispositivo para un fondo de pantalla perfectamente nítido.

Los degradados en la web, una breve historia

Los degradados tienen una larga historia predigital en la impresión y el aerógrafo. El vocabulario de «degradado» como una rampa suave de un color a otro proviene directamente de la cromolitografía y del arte de carteles con aerógrafo de finales del siglo XIX; los estudiantes de diseño de la Bauhaus practicaban ejercicios de rampa tonal en la década de 1920, mucho antes de que ningún píxel llevara uno a una pantalla.

Los degradados digitales llegaron en dos momentos contiguos a principios de la década de 1990. Adobe Photoshop 1.0 (febrero de 1990) incluyó una herramienta de degradado desde el primer día, un algoritmo de «mezcla» que interpolaba entre las muestras de primer plano y de fondo con una atenuación lineal y radial. Adobe PostScript Level 2 (1991) introdujo los patrones de sombreado como una característica de primera clase del lenguaje; hasta entonces, PostScript Level 1 no tenía forma de describir un degradado de forma nativa y había que falsearlo con rellenos en bandas de grises incrementales. PostScript Level 3 (1997) añadió los sombreados de malla de Tipo 6 (parche de Coons) y de Tipo 7 (producto tensorial) que impulsaron todos los degradados impresos de la industria de las revistas de finales de la década de 1990. La herramienta de degradado de malla de Adobe Illustrator llegó en la versión 8 (1998).

Los degradados CSS en la web llegaron más tarde de lo que la gente recuerda. El -webkit-gradient() de WebKit llegó en Safari 4 y Chrome 1 en 2008 con una sintaxis prolija propia. El -moz-linear-gradient() de Mozilla le siguió en Firefox 3.6 (enero de 2010), usando la sintaxis que con el tiempo se convertiría en estándar. Los linear-gradient() y radial-gradient() sin prefijo alcanzaron la categoría de Recomendación Candidata del W3C en abril de 2012 y se podían usar ampliamente desde alrededor de 2013. conic-gradient() es mucho más nuevo: Chrome 69 en septiembre de 2018 (tras un marcador), sin marcador en Chrome 75 (junio de 2019), Firefox 83 (noviembre de 2020). Ahora está disponible como Baseline en todos los navegadores modernos.

Esqueuomórfico, luego plano, luego degradado de nuevo

Los degradados se convirtieron en el lenguaje visual del diseño web de finales de la década de 1990 y principios de la de 2000; los botones brillantes, biselados y reflectantes de la Web 2.0 de la interfaz Aqua de Apple (2000) eran, en esencia, degradados anidados con un reflejo interior nítido sobre un suave desvanecimiento del cuerpo. El movimiento del diseño plano cristalizó en torno a Metro de Microsoft (Windows Phone 7, 2010) e iOS 7 de Apple (2013), reaccionando contra el esqueuomorfismo cargado de degradados al eliminar de la interfaz cada sombra, bisel y mezcla. Durante unos cinco años (2013-2018), los degradados estuvieron pasados de moda.

El péndulo volvió a oscilar con fuerza a partir de 2017. El degradado de malla animado y multicolor de Stripe en su página de inicio estableció una plantilla que copió toda la industria del SaaS. El cambio de marca del logotipo de Instagram de 2016 sustituyó una cámara plana por un degradado saturado de rosa, naranja y púrpura (un eco deliberado de los logotipos de fotografía de los años ochenta). Para el final de la década, los degradados eran omnipresentes de nuevo, pero con un nuevo vocabulario: mallas, manchas desenfocadas, suaves con OKLCH, conscientes de la accesibilidad. Tailwind CSS 4 (enero de 2025) incluyó un conjunto seleccionado de utilidades de degradado predeterminadas, incluidos degradados cónicos con indicaciones de interpolación de tono.

La sintaxis de degradados CSS en una pantalla

Las tres funciones de degradado de CSS toman una lista de paradas de color y una dirección:

• linear-gradient(angle, colors…): el ángulo en CSS usa la convención de rumbo de brújula: 0deg apunta hacia arriba (el primer color en la parte inferior), 90deg apunta a la derecha, 180deg apunta hacia abajo (el predeterminado), 270deg apunta a la izquierda. Ten en cuenta que esto es lo contrario del ángulo polar matemático. También puedes usar palabras clave: to top right calcula el ángulo de modo que la línea del degradado pase por la diagonal, no es lo mismo que un degradado de 135° en una caja no cuadrada.
• radial-gradient(shape size at position, colors…): los colores se extienden hacia fuera desde un punto central. circle o ellipse; palabras clave de tamaño closest-side, farthest-corner; la posición tiene como predeterminado el centro.
• conic-gradient(from angle at position, colors…): los colores rotan en el sentido de las agujas del reloj alrededor de un centro, como una rueda de color. Útil para gráficos circulares, efectos de barrido y ese aspecto de «gráfico de anillo». Las variantes repetidas de las tres (repeating-linear-gradient, etc.) repiten las paradas de color infinitamente.

Las paradas duras (colocar dos paradas de color en el mismo porcentaje) crean bandas nítidas en lugar de mezclas suaves: linear-gradient(red 0%, red 50%, blue 50%, blue 100%) es una división de dos colores, no un degradado. Útil para rayas, tarjetas con color por secciones o pseudobordes.

La revolución de OKLCH y el punto medio gris turbio

Un degradado del rojo puro #ff0000 al verde puro #00ff00 en la interpolación sRGB predeterminada pasa por un amarillo-marrón turbio y desaturado en torno a #7f7f00. Esto sucede porque la interpolación lineal de sRGB reduce los canales R y G en el punto medio, y nuestros ojos perciben el punto medio como mucho más oscuro y menos saturado que cualquiera de los extremos. El clásico punto débil del diseño web.

CSS Color Module Level 4 añadió espacios de color perceptualmente uniformes y la capacidad de interpolar degradados en ellos: linear-gradient(in oklch, red, green). OKLCH (y su hermano OKLab), diseñado por Björn Ottosson en diciembre de 2020, separa la luminosidad, el croma y el tono de modo que la interpolación a lo largo del eje de tono toma el camino corto alrededor de la rueda de color, preservando la saturación en todo momento. El mismo degradado de rojo a verde en OKLCH pasa por un amarillo vívido en el punto medio.

La regla general:

• Dos tonos análogos (rojo a naranja, azul a púrpura): sRGB y OKLCH se ven similares; normalmente está bien.
• Dos tonos complementarios (rojo a verde, azul a naranja): sRGB produce un gris turbio, OKLCH produce un vívido barrido de tono. OKLCH gana con claridad.
• Un color a blanco o negro: sRGB se ve deslucido en el punto medio; OKLCH mantiene el cambio de luminosidad percibida de forma suave.
• Dos colores desaturados de luminosidad similar: diferencia mínima.

Compatibilidad de navegadores: interpolation-method para degradados llegó en Safari 16.2 (diciembre de 2022), Chrome 111 (marzo de 2023) y Firefox 113 (mayo de 2023); ahora está disponible como Baseline ampliamente disponible.

Preajustes de resolución: elige el número de píxeles correcto

Un fondo de pantalla más pequeño que la pantalla se estira y se ve borroso; uno mucho más grande desperdicia tamaño de archivo y memoria. Objetivos comunes en 2026:

Resolución	Nombre común	Dónde
1920×1080	Full HD / 1080p	El portátil y el escritorio más comunes en 2026
2560×1440	QHD / 2K	Monitores de juego y de creadores de gama media
3440×1440	UWQHD ultraancho	Monitores ultraanchos curvos de 21:9
3840×2160	4K / UHD	Escritorios de gama alta y Apple Studio Display
5120×2880	5K	Apple iMac Retina, Studio Display
1080×1920	Teléfono en vertical	Base genérica FHD de Android
1170×2532 / 1290×2796	iPhone moderno	Familia iPhone 13-16 a 19,5:9
2048×2732	iPad Pro de 12,9 pulgadas	Tabletas 4:3

Cuándo recurrirías a esto

• Fondos de pantalla para dispositivos personales: escritorio, pantalla de bloqueo, pantalla de inicio, incluso el fondo de la esfera de un smartwatch.
• Fondos virtuales para videoconferencias. Los degradados sólidos son más fáciles para la segmentación automática de Zoom/Teams/Meet que las fotos con movimiento: reducen el artefacto de «halo» alrededor del hablante.
• Cabeceras de redes sociales: Twitter/X 1500×500, LinkedIn 1584×396, banner de canal de YouTube 2560×1440 (con consideraciones de zona segura), Instagram Stories 1080×1920.
• Degradados de identidad de marca. La malla púrpura-azul de Stripe, el rosa-naranja-púrpura de Instagram, el verde lima a verde oscuro de Spotify, el púrpura-rosa de Slack: todos son ejemplos reales de degradados que definen una marca.
• Secciones hero en páginas web: aunque los degradados CSS normalmente se aplican directamente mediante background-image, una alternativa en PNG es útil para los correos electrónicos (la mayoría de los clientes de correo todavía no renderizan los degradados CSS de forma fiable) y para los navegadores sin interpolación oklch.
• Estados vacíos, esqueletos de carga, tarjetas de panel: superficies de interfaz que se benefician de un interés visual sutil sin resultar molestas.
• Impresión y merchandising. Un fondo de pantalla 4K a 300 DPI cubre aproximadamente un póster de 12 × 18 pulgadas.

Accesibilidad: texto sobre degradados

El error práctico más común con los fondos de degradado es no superar el contraste para cualquier texto superpuesto. El SC 1.4.3 de WCAG 2.2 (Contraste mínimo, Nivel AA) requiere 4,5:1 para el texto de cuerpo y 3:1 para el texto grande (18 pt normal o 14 pt en negrita). WCAG se escribió para fondos sólidos; con un degradado, importa la relación de contraste en cada punto bajo el texto: el peor punto es el que cuenta.

Soluciones prácticas cuando pones texto sobre un degradado: añade una capa negra o blanca semitransparente bajo el texto, restringe el degradado bajo el texto a un rango de luminosidad estrecho o usa una sombra de texto fuerte como alternativa. Los degradados verticales (oscuro arriba, claro abajo) suelen ser más amigables con el texto que los diagonales: el texto que fluye de izquierda a derecha encuentra una luminosidad de fondo constante en cada línea; un degradado de 45° bajo un bloque de texto largo obliga a cada línea a atravesar el rango de luminosidad, lo que hace mucho más difícil mantener un contraste constante.

Más preguntas

¿Por qué mi degradado tiene bandas visibles?

Dos causas habituales. Primero, la compresión JPEG: la codificación basada en DCT de JPEG produce un «bloqueo» visible en las rampas tonales suaves, sobre todo en las regiones de baja saturación. Guarda como PNG o WebP sin pérdidas en su lugar. Segundo, la profundidad de color de 8 bits por canal: un degradado de 8 bits entre dos colores cercanos solo tiene unos pocos pasos tonales distintos y el ojo a veces puede distinguirlos. Añadir una sutil superposición de ruido/tramado (1-2 % de ruido) rompe las bandas al añadir una variación natural; muchas herramientas de diseño de gama alta lo hacen automáticamente.

¿Debería usar lineal, radial o cónico para un fondo de pantalla de escritorio?

Para la mayoría de los fondos de pantalla, un lineal con una ligera diagonal (alrededor de 135°) o un radial centrado fuera de la pantalla queda mejor: crean asimetría sin resultar molestos. Los degradados cónicos son llamativos, pero se leen como «diseñado por un diseñador» en lugar de como un fondo ambiental, así que son mejores para superficies de acento (carátulas de álbum, publicaciones en redes sociales) que para los fondos de pantalla que mirarás durante ocho horas al día. Los degradados de malla (varios degradados radiales superpuestos) son el aspecto más moderno, pero requieren o bien una biblioteca de JS o bien una imagen generada; un único degradado radial con dos tonos complementarios a baja saturación es una buena aproximación.

¿Qué combinaciones de colores quedan mejor?

Tres patrones fiables: análogo (dos colores adyacentes en la rueda (de púrpura a azul, de naranja a rojo)) se lee como tranquilo y armonioso; monocromático (mismo tono, luminosidad variable, el clásico azul de Stripe) se lee como de marca y sutil; triádico con OKLCH (tres o cuatro colores equidistantes interpolados en un espacio perceptual) da el aspecto moderno de Stripe / Instagram. Evita dos colores complementarios puros (rojo/verde, azul/naranja) salvo que uses explícitamente la interpolación oklch(): sRGB te dará un punto medio turbio.

¿Se envía algo a un servidor?

No. El degradado se renderiza en un <canvas> de tu navegador, el PNG se exporta mediante canvas.toDataURL() y la cadena CSS la genera JavaScript localmente. Nada de tus elecciones de color, dimensiones o de la imagen resultante sale de la página.

Herramientas relacionadas