Fondo de pantalla con degradado: códigos y cómo crearlo

Un fondo de pantalla con degradado es una mezcla suave de colores usada como fondo de un escritorio o de un móvil. Funciona porque no tiene detalles que compitan con los iconos, los widgets y las ventanas, y cambia todo el ambiente de una pantalla solo con el color. Para hacer uno bueno: elige una familia de tres a cinco colores, mézclalos con suavidad con la luz donde quieras que descanse la vista, exporta con el tamaño y la forma exactos de tu pantalla y añade grano fino para que la mezcla siga lisa y no muestre rayas.

Abajo encontrarás degradados listos para copiar, el método para crear los tuyos y cómo ajustar cada uno a una pantalla. Para más combinaciones de colores, mira las combinaciones de colores para degradados.

Ideas de fondos de pantalla con degradado, con códigos

Cada uno de estos es un único degradado CSS, así que puedes verlo en un navegador, adaptar los colores y exportarlo a cualquier tamaño. Están agrupados de forma aproximada, de brillantes a oscuros.

Cómo hacer un fondo de pantalla con degradado

1. 1

   Averigua el tamaño de tu pantalla

   Consulta los ajustes de pantalla para saber la resolución y las especificaciones de tu móvil para saber el tamaño de su pantalla. Diseña exactamente a ese tamaño, o mayor con la misma forma.

2. 2

   Elige una familia de colores

   Tres a cinco colores con una relación clara: tonos vecinos para la calma, una pareja cálida y fría para la energía. Los colores análogos son el camino más fácil.

3. 3

   Coloca la luz

   Decide dónde va la zona más brillante. En un escritorio, lejos de los iconos; en un móvil, normalmente detrás del reloj o en la parte inferior central.

4. 4

   Mezcla con suavidad

   Reparte las paradas y mezcla en OKLCH si los colores están lejos en el círculo, para que el medio no se vuelva gris.

5. 5

   Añade grano

   Una capa de ruido fino con poca intensidad. Oculta las bandas y hace que el color se sienta más rico.

6. 6

   Exporta en PNG

   Una exportación sin pérdidas mantiene suave la mezcla. Un JPEG muy comprimido es la causa más común de las rayas.

Si quieres construir uno en el navegador, aplica un degradado a una página a pantalla completa y mézclalo en OKLCH. Los navegadores modernos admiten la interpolación de color en degradados, que mantiene vivos los colores vivos por el medio de la mezcla.

<!doctype html>
<html>
<head>
<style>
  html, body { margin: 0; height: 100%; }
  body {
    background:
      radial-gradient(ellipse at 25% 20%, oklch(0.78 0.14 20 / 0.9), transparent 60%),
      linear-gradient(135deg in oklch, oklch(0.62 0.2 300), oklch(0.72 0.15 200));
  }
</style>
</head>
<body></body>
</html>

Formas de fondos de pantalla para escritorio y móvil

Un fondo de pantalla queda mejor cuando está hecho para la forma de su pantalla y no recortado de otra. La mayoría de las pantallas de escritorio son 16:9 o casi; los portátiles suelen ser algo más altos, alrededor de 16:10. Los móviles son mucho más altos que 16:9: muchos rondan 9:19,5. Diseña cada forma por separado y deja que la luz caiga en el lugar adecuado en cada una.

Escritorio 16:9

1920 × 1080

Portátil 16:10

1600 × 1000

Móvil alto, alrededor de 9:19,5

900 × 1950

Con dos o más monitores, puedes poner una imagen por pantalla o hacer una imagen ancha con el ancho combinado de ambas. La segunda opción permite que un único degradado fluya por la mesa, pero la unión entre pantallas lo cortará, así que mantén la luz lejos de ese borde.

Los móviles añaden dos complicaciones: el reloj de la pantalla de bloqueo y los widgets se sitúan sobre el tercio superior, y algunos móviles mueven ligeramente el fondo al inclinarlos, lo que recorta los bordes. El tamaño de fondo de pantalla para móvil trata ambas con detalle.

Cómo mantener suaves los fondos de pantalla con degradado

Los fondos de pantalla se ven grandes, a menudo en pantallas brillantes y de alta calidad, lo que los convierte en la prueba más dura de un degradado. Los dos problemas que verás son las bandas, cuando una mezcla lisa se rompe en pasos visibles, y los medios turbios, cuando dos colores fuertes se encuentran en gris.

Las explicaciones más profundas están en las bandas en degradados y los degradados turbios. En los fondos de pantalla, el grano es la solución más sencilla: rompe los pasos para que la vista vea una mezcla continua, y hace que el color digital plano se sienta como película.

Fondos de pantalla con degradado oscuros o claros

Los fondos oscuros cansan menos la vista de noche y hacen destacar los iconos de colores; también forman bandas con más facilidad, así que el grano importa más. Los fondos claros se sienten ligeros, pero pueden dificultar la lectura del texto blanco de los widgets. Si tu móvil cambia entre apariencia clara y oscura, plantéate un par: los mismos tonos, una versión aclarada y otra profundizada.

GR·N10S·5T

Cameo Bolero

Ver este Mark

En Gradiently puedes diseñar con cualquier Mark en tamaños personalizados de hasta 8000 píxeles en el lado largo, así que un mismo estilo puede convertirse en fondo de escritorio, de portátil y de móvil. Los Marks también se exportan como vídeos en bucle de 5 a 30 segundos si quieres un fondo de pantalla animado.