Degradados sutiles: cambios de color discretos para interfaces limpias

Un degradado sutil pasa entre dos colores tan cercanos que el cambio se siente más de lo que se ve: de blanco a un blanco roto frío, de casi negro a un casi negro algo más suave. Ese pequeño cambio hace que una superficie parezca iluminada, y por eso las interfaces limpias los usan en fondos de página, tarjetas y paneles en modo oscuro. Los códigos de abajo mantienen la diferencia de luminosidad en unos pocos puntos; si es mayor, el degradado empieza a convertirse en protagonista en lugar de en superficie.

Códigos de degradados sutiles claros

Cada uno empieza cerca del blanco y deriva hacia un matiz tenue. Elige el matiz a partir del color de tu marca para que incluso el fondo lleve un rastro de identidad. Las mezclas de arriba abajo resultan más naturales, porque la luz suele venir de arriba.

Códigos de degradados sutiles oscuros

Las superficies oscuras salen ganando todavía más, porque un negro plano y puro parece un agujero en la pantalla. Aclara un poco la parte superior y deja que la inferior se asiente. Degradados para modo oscuro cubre temas completos; estas son las piezas básicas.

Dónde funcionan los degradados sutiles en una interfaz

La regla general: un degradado sutil nunca debería ser lo que miras. Si alguien que revisa el diseño comenta el degradado, es demasiado fuerte para un fondo. Para estilos contenidos en impresión y redes sociales, además de pantallas, consulta fondos minimalistas.

Cómo teñir un degradado sutil con el color de tu marca

Un degradado gris neutro es seguro pero anónimo. Teñir el extremo claro u oscuro con un rastro del tono de tu marca hace que toda la interfaz parezca emparentada con el logotipo sin que nadie sepa decir por qué. El truco está en conservar el tono y descartar casi toda la saturación.

1. 1

   Toma el tono de la marca

   Convierte el color principal de tu marca a oklch o HSL y apunta solo su tono: unos 265 para un violeta, 160 para un verde, 30 para un naranja cálido.

2. 2

   Mantenlo casi gris

   Pon el croma muy bajo, entre 0,005 y 0,015 en oklch, o la saturación por debajo del 30% en HSL con una luminosidad muy alta. Buscas un susurro de color, no un pastel.

3. 3

   Fija dos valores de luminosidad

   Para temas claros, prueba 99% y 96%; para temas oscuros, en torno a 20% y 15%. Mantén los dos extremos en el mismo tono para que la mezcla nunca derive hacia el gris o hacia un segundo color.

4. 4

   Compruébalo junto al blanco o el negro puros

   Coloca el degradado al lado de un bloque blanco o negro liso. Si no ves ninguna diferencia, mueve un poco el extremo inferior; si el matiz se nota desde la otra punta de la sala, baja el croma.

El mismo matiz puede pasar después a bordes, separadores y estados hover, de modo que el degradado forme parte de un sistema discreto y no sea un efecto aislado. Los botones son el único sitio donde conviene permitir un cambio algo más fuerte, unos pocos puntos más oscuro abajo, porque un toque de volumen ayuda a que parezcan pulsables.

Cómo escribir un degradado sutil en CSS

Los códigos hex funcionan en todas partes. Para un control más fino, escribe los colores en oklch, donde el primer número es la luminosidad percibida, y así fijas el cambio exacto: de 99% a 96%, por ejemplo. Mezclar en oklch también mantiene el cambio uniforme en toda la longitud. Degradados CSS en oklch explica la sintaxis, y degradado lineal en CSS cubre lo básico.

:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}

Por qué los degradados sutiles hacen banding, y la solución

Dos colores cercanos tienen muy pocos pasos entre sí en una imagen de 8 bits. Estíralos a lo largo de un hero de 1920 píxeles y cada paso se convierte en una franja visible, sobre todo en degradados oscuros y pantallas baratas. La explicación completa está en banding en degradados.

En la web, una pequeña textura de ruido SVG sobre el degradado con baja opacidad elimina los pasos visibles sin que nadie note el grano; textura de ruido en CSS tiene el código. Para publicaciones en redes y diapositivas, un Mark de Gradiently lleva su propio grano y se renderiza a cualquier tamaño, así que un fondo discreto se mantiene suave tanto en una historia como en un banner. Cuando quieras lo contrario de la discreción, degradados vibrantes tiene los códigos saturados.