# Degradados sutiles: cambios de color discretos para interfaces limpias

[Canonical HTML page](https://gradiently.design/es/guide/subtle-gradients)

Los mejores degradados de interfaz son los que nadie nota hasta que desaparecen. Aquí tienes códigos para pegar hoy mismo, los sitios donde rinden y la trampa técnica en la que cae todo el mundo.

## The short version

- Un degradado sutil cambia la luminosidad solo unos pocos puntos porcentuales, o mueve el tono un pequeño paso, para que una superficie parezca iluminada en lugar de plana.
- Los degradados sutiles funcionan mejor en fondos de página, tarjetas, secciones hero y superficies en modo oscuro, donde aportan profundidad sin competir con el contenido.
- Mezclar en oklch mantiene uniforme el cambio de luminosidad de un degradado sutil de un extremo al otro.
- Los degradados sutiles hacen más banding que los intensos porque hay menos pasos de color entre dos tonos cercanos, y un poco de ruido suele ser la solución.
- En una interfaz oscura, un borde superior algo más claro se lee como luz que cae sobre la superficie.

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.

- Papel: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Azul bruma: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Lino cálido: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Neblina lila: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Velo de menta: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Luz de esquina: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Seis degradados sutiles claros. En un monitor luminoso se ven como papel suavemente iluminado; en un móvil a plena luz, casi como blanco.

## 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](https://gradiently.design/es/guide/dark-mode-gradients) cubre temas completos; estas son las piezas básicas.

- Grafito: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Medianoche: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Violeta tinta: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Bosque nocturno: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Brillo superior: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Espresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Seis degradados sutiles oscuros. El brillo superior encaja en un hero o un modal: un leve charco de luz desde arriba.

## Dónde funcionan los degradados sutiles en una interfaz

| Superficie | Cuánto de sutil | Ejemplo |
| --- | --- | --- |
| Fondo de página | Apenas visible en toda la altura | `#ffffff` a `#f6f7f9` |
| Tarjeta | Un toque más clara en el borde superior | `#ffffff` a `#fafafa` |
| Sección hero | Un matiz tenue que se acumula tras el titular | Luz de esquina o brillo superior |
| Botón | Arriba más claro, abajo algo más profundo | `#4f46e5` a `#4338ca` |
| Panel en modo oscuro | Arriba aclarado, abajo asentado | `#18181b` a `#0f0f12` |
| Barra lateral o pie | Un paso más oscuro que la página, aún con degradado | `#f8fafc` a `#eef2f7` |

Degradados sutiles por superficie. Usa una sola dirección en toda la interfaz para que la luz parezca venir de un mismo sitio.

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](https://gradiently.design/es/guide/minimalist-backgrounds).

Una publicación vertical con una frase corta sobre un fondo sereno que cambia con suavidad

Un fondo sereno y una frase corta. Cuando el color se mantiene discreto, la tipografía hace el trabajo.

## 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. **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. **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. **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. **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](https://gradiently.design/es/guide/css-gradient-oklch) explica la sintaxis, y [degradado lineal en CSS](https://gradiently.design/es/guide/css-linear-gradient) cubre lo básico.

```css
: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;
}
```

Una alternativa en hex y después una versión en oklch con un cambio de luminosidad preciso para los navegadores que admiten interpolación de color en degradados.

> **Fijo o con desplazamiento** `background-attachment: fixed` mantiene el degradado ligado a la ventana, para que una página larga no lo estire hasta convertirlo en un cambio invisible. Pruébalo en móvil, donde algunos navegadores tratan los fondos fijos de otra forma.

## 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](https://gradiently.design/es/guide/gradient-banding).

### Muestra franjas

- Dos colores oscuros muy cercanos a pantalla completa
- Un degradado guardado como JPEG comprimido
- Una mezcla limpia sin nada que rompa los pasos

### Se mantiene suave

- Un cambio algo mayor, o una tercera parada
- Renderizado en CSS, o exportado como PNG
- Una capa de ruido tenue sobre el degradado

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](https://gradiently.design/es/guide/css-noise-texture) 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](https://gradiently.design/es/guide/vibrant-gradients) tiene los códigos saturados.

## FAQ

### ¿Qué es un degradado sutil?

Un degradado entre dos colores muy cercanos, que suelen diferir en luminosidad solo unos pocos puntos, para que la superficie parezca suavemente iluminada en lugar de visiblemente coloreada.

### ¿Qué degradado sutil va bien sobre un fondo blanco?

Prueba `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, que pasa del blanco a un gris frío tenue.

### ¿Por qué mi degradado sutil se ve a franjas?

Los colores cercanos tienen pocos pasos entre sí, así que hacen banding. Añade una tercera parada, amplía un poco el cambio o pon encima una textura de ruido tenue.

### ¿Los degradados sutiles deben ir de arriba abajo?

Normalmente sí. La luz suele venir de arriba, así que una parte superior algo más clara resulta natural tanto en superficies claras como oscuras.