# Degradado gris: códigos neutros que no aburren

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

El gris es el color que elige la gente cuando no quiere elegir. Con matiz, con luz y combinado con un acento, se convierte en uno de los fondos más seguros que puedes usar.

## The short version

- Un degradado gris se ve cuidado cuando sus grises llevan un ligero matiz, frío hacia el azul o cálido hacia el marrón.
- Mezclar grises cálidos y fríos en un degradado lo hace parecer sucio, así que elige una temperatura y mantenla.
- Los grises metálicos salen de una banda nítida y brillante entre paradas más oscuras, que imita la luz al rozar una superficie.
- Los degradados grises forman bandas más visibles que los de colores, y una capa de grano fino es el arreglo habitual.
- Un solo color de acento saturado contra un degradado gris hace que todo el diseño parezca intencionado.

Un **degradado gris** deja de ser aburrido en cuanto sus grises tienen matiz. Los grises neutros puros, con el mismo rojo, verde y azul, resultan planos y digitales. Empújalos un poco hacia el frío, hacia el azul, y obtienes niebla, pizarra y acero; empújalos hacia el cálido, hacia el marrón, y obtienes piedra, hormigón y peltre. Añade una luz que venga de algún sitio y un color de acento, y el gris se vuelve sereno, moderno y discretamente seguro. A continuación, los códigos para cada uno.

## Gris cálido o gris frío: elige uno

Los grises fríos son técnicos, limpios y precisos. Los grises cálidos son arquitectónicos, naturales y suaves. Ambos funcionan de maravilla solos. Juntos en un degradado pelean, y el resultado parece una mancha. Mira las muestras de abajo por pares: la fila superior tira al azul, la inferior al marrón, y la diferencia es pequeña pero evidente una vez que la has visto.

- Niebla: #f4f6f8
- Bruma fría: #aeb6be
- Pizarra: #4a535d
- Tormenta: #22272c
- Tiza: #f3f1ee
- Hormigón: #b5b1ab
- Peltre: #5f5b56
- Grafito: #1c1c1e

Cuatro grises fríos y cuatro cálidos. El grafito está cerca del neutro, por eso combina con casi todo.

## Códigos de degradado gris frío y cálido

Niebla y pizarra son la pareja fría: niebla para composiciones claras y aireadas y pizarra para las oscuras y serias. Tormenta añade una nube iluminada, que da profundidad real a un gris oscuro. Piedra y hormigón son la pareja cálida, más cercana a los materiales de construcción, y el grafito es el casi negro que puedes usar en lugar del negro liso.

- Niebla: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Pizarra: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Tormenta: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Piedra cálida: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Hormigón: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Grafito: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Seis grises con temperatura. Tormenta y grafito llevan texto blanco; niebla, piedra y hormigón piden texto oscuro.

Si vas aún más oscuro, los códigos de [degradados negros](https://gradiently.design/es/guide/black-gradient) continúan desde el grafito. Para diseños construidos con un solo tono en muchos niveles de luminosidad, consulta el [degradado monocromo](https://gradiently.design/es/guide/monochrome-gradient).

## Plata, acero y otros degradados de gris metálico

El metal no es un color, es un reflejo. Un **degradado plateado** funciona gracias a una banda nítida y brillante apretada entre paradas más oscuras, como la luz al rozar una superficie curva. El metal oscuro usa el mismo truco a un nivel más oscuro, y el acero cepillado añade finas líneas paralelas. Son atrevidos, así que úsalos para una insignia, una placa de título o un solo panel y no para toda la página.

- Plata pulida: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Metal oscuro: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Peltre: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Líneas de acero cepillado: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Grises metálicos. Cuanto más estrecha la banda brillante, más brillante parece el metal; extiéndela y se vuelve satinado.

El acero cepillado queda mejor cuando las líneas se apoyan sobre un degradado suave e iluminado y no solas. Dos capas lo consiguen:

```css
.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}
```

Líneas blancas finas cada tres píxeles sobre una mezcla plateada iluminada. Cambia el ángulo de la segunda capa para mover dónde cae la luz.

## Gris más un color

Pocos fondos resaltan un único color fuerte tan bien como el gris. El acento se ve más brillante contra el neutro que contra otros colores, así que con poco basta: una palabra, un botón, una línea. Elige el acento según el sector y el ambiente.

| Acento | Hex | Se lee como | Bueno para |
| --- | --- | --- | --- |
| Azul eléctrico | `#3b82f6` | Técnico, de confianza | Software, fintech, datos |
| Naranja señal | `#f97316` | Industrial, enérgico | Construcción, herramientas, logística |
| Lima | `#a3e635` | Deportivo, fresco | Fitness, running, equipo de exterior |
| Rubor | `#f2c6c2` | Suave, a la moda | Moda, belleza, estilo de vida |
| Latón | `#c9a24a` | Premium, clásico | Arquitectura, relojes, hoteles |

Usa grises fríos con azul y lima, y grises cálidos con naranja, rubor y latón.

Hay esquemas completos construidos así en las [paletas de colores tech](https://gradiently.design/es/guide/tech-color-palettes) y las [paletas de colores neutros](https://gradiently.design/es/guide/neutral-color-palettes).

## Un gris que parece intencionado

### Parece sin terminar

- Grises neutros puros sin matiz
- Grises cálidos y fríos en una misma mezcla
- Bandas visibles sobre una superficie lisa
- Tres o cuatro colores de acento
- Texto gris medio sobre fondo gris medio

### Parece intencionado

- Un ligero matiz azul o marrón en todo el degradado
- Una temperatura de principio a fin
- Un grano fino sobre todo el degradado
- Un acento, usado con moderación
- Texto casi blanco o casi negro, nunca gris medio

El banding merece su propio aviso. Los grises no tienen tono que distraiga al ojo, así que cada escalón de un degradado suave se ve, sobre todo en pantallas grandes y tras la compresión. Una capa de ruido ligera lo oculta; la [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture) tiene un fragmento, y el [banding en degradados](https://gradiently.design/es/guide/gradient-banding) explica por qué ocurre.

## Degradados grises en webs y en modo oscuro

En la web, los degradados grises hacen su mejor trabajo en silencio. Un degradado niebla detrás de una sección de funciones la separa de una página blanca sin un borde duro. En modo oscuro, un degradado grafito que se aclara ligeramente hacia la parte superior de una tarjeta le da profundidad, donde un gris plano parecería un agujero. Mantén pequeño el cambio entre paradas, unos pocos puntos de luminosidad, para que el degradado se lea como luz y no como decoración. El [diseño en modo oscuro](https://gradiently.design/es/guide/dark-mode-design) cubre las reglas más amplias para interfaces oscuras, de los colores de superficie al contraste.

## Fondos de degradado gris en la práctica

Arquitectos, estudios de ingeniería y empresas de software usan el gris porque deja hablar al trabajo. Un degradado pizarra con texto blanco y un acento azul hace que el anuncio de un proyecto parezca preciso; un degradado piedra cálido con texto grafito hace que la portada de un porfolio resulte táctil. El [branding para estudios de arquitectura](https://gradiently.design/es/guide/architecture-firm-branding) muestra hasta dónde llega una paleta contenida.

Una imagen ancha de LinkedIn con fondo de degradado gris pizarra frío y las palabras Hecho para durar en blanco

Una imagen de enlace de LinkedIn sobre un Mark pizarra. Texto blanco en el lado más oscuro; la zona iluminada queda lejos de las palabras.

Los fondos sutiles son donde un sistema de diseño da sus frutos. En Gradiently, un Mark gris lleva su propio grano, que mantiene a raya el banding, y la tinta automática elige texto claro u oscuro línea a línea a medida que el gris cambia por el encuadre.

## FAQ

### ¿Cómo hago que un degradado gris resulte menos aburrido?

Da a los grises un ligero matiz frío o cálido, ilumina el degradado desde un lado, añade grano fino y usa un color de acento saturado.

### ¿Cuál es el CSS de un degradado plateado?

Usa una banda brillante entre paradas más oscuras, por ejemplo `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### ¿Se dice gray gradient o grey gradient?

Las dos formas son correctas. Gray es la grafía estadounidense y grey la británica; significan exactamente el mismo color.

### ¿Qué color combina mejor con un degradado gris?

Un acento fuerte: azul eléctrico o lima con grises fríos; naranja señal, rubor o latón con grises cálidos.

### ¿Por qué mi degradado gris tiene rayas?

Las mezclas de gris suaves muestran cada escalón de color, sobre todo tras la compresión. Añade una capa de ruido ligera y exporta como PNG.