# Degradado plateado: códigos metálicos y cómo iluminarlos

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

La diferencia entre la plata y el simple gris es la luz. Aquí hay seis degradados plateados que puedes copiar, las cuatro reglas que los hacen leerse como metal y CSS para texto, botones y superficies cepilladas.

## The short version

- Un degradado plateado se lee como metal y no como gris cuando combina un ligero tinte frío, un amplio rango de oscuro a claro y un brillo estrecho e intenso.
- La plata pulida tiene transiciones duras y contraste fuerte, la plata satinada tiene transiciones suaves y la plata cepillada añade finas líneas paralelas.
- Los grises neutros puros tienden a verse planos y polvorientos, así que la mayoría de las platas convincentes tiran muy ligeramente al azul o, en el platino y el peltre, muy ligeramente a lo cálido.
- Los degradados grises largos y sutiles son especialmente propensos a las bandas, que una capa de grano fino oculta.
- Los degradados plateados funcionan mejor en texto, bordes, botones y formas pequeñas, sobre un fondo oscuro.

Un **degradado plateado** parece metal cuando tiene tres cosas que le faltan al gris simple: un leve tinte frío, un gran salto entre sus paradas más oscura y más clara, y un brillo estrecho y no extendido. Un código fiable de partida es `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. A continuación hay seis platas para copiar, las reglas de iluminación que hay detrás y CSS para texto plateado, botones y metal cepillado.

## Códigos de degradado plateado

- Plata pulida: `linear-gradient(135deg, #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%, #a7afb9 58%, #4b525c 82%, #9aa2ac 100%)`
- Plata satinada: `linear-gradient(160deg, #8d939b 0%, #c3c8ce 35%, #e4e7ea 55%, #b5bbc2 75%, #8a9098 100%)`
- Plata cepillada: `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`
- Platino frío: `linear-gradient(135deg, #6f7680 0%, #d6dce4 30%, #fbfdff 45%, #b9c3cf 60%, #56606c 100%)`
- Peltre cálido: `linear-gradient(135deg, #4f4c48 0%, #a39f99 30%, #e3e0da 46%, #9b968f 62%, #4a4743 100%)`
- Luz plateada sobre negro: `radial-gradient(ellipse at 30% 20%, #e9edf1 0%, #8f97a1 22%, #2b3038 52%, #0c0e11 85%)`

Seis platas: cuatro para texto, bordes y formas, una superficie cepillada y un fondo. Cada una tiene una parada oscura y un brillo casi blanco.

- Acero de sombra: #4b525c
- Metal pavonado: #5f6670
- Plata: #a7afb9
- Plata clara: #c9cfd6
- Brillo: #f7f9fb

Los códigos de color de la plata detrás de la Plata pulida. Todos tiran levemente al azul, y por eso se leen como metal y no como hormigón.

## Cómo iluminar un degradado plateado

La plata, como cualquier metal pulido, muestra sobre todo luz reflejada. Tu degradado es un reflejo pintado, así que piensa de dónde viene la luz y con qué nitidez la capta la superficie.

1. **Tiñe los grises ligeramente de frío** Añade un toque de azul a cada parada, lo justo para que el gris deje de parecer polvo o cemento.
2. **Ve más oscuro de lo que parece correcto** El metal necesita una sombra profunda. Tu parada más oscura debe ser un metal pavonado, no un gris medio.
3. **Mantén el brillo estrecho** Una banda casi blanca que cubre una pequeña porción del degradado se lee como brillo. Una zona clara amplia se lee como una superficie gris pálida.
4. **Decide entre pulida o satinada** Acerca las paradas para una plata pulida con reflejos nítidos; sepáralas para un acabado suave y satinado.

Lleva el contraste hasta el final, con una línea de horizonte dura por el medio, y la plata se convierte en cromo espejo; el [efecto de texto cromado](https://gradiently.design/es/guide/chrome-effect) trata esa versión. Para un metal cálido con la misma lógica, mira [degradado dorado](https://gradiently.design/es/guide/gold-gradient-design).

## Plata frente a gris simple

### Se lee como gris

- Grises perfectamente neutros
- Dos paradas, de gris claro a gris medio
- Solo transiciones uniformes y suaves
- Una zona pálida amplia sin brillo claro
- Grandes áreas planas de plata sobre una página blanca

### Se lee como plata

- Grises con un leve tinte frío o cálido
- Cinco o seis paradas, de metal pavonado a casi blanco
- Un reflejo más nítido en algún punto
- Un brillo estrecho e intenso descentrado
- Detalles plateados sobre un fondo oscuro

Si lo que quieres en realidad es una superficie neutra y serena y no metal, es otro trabajo: [degradado gris](https://gradiently.design/es/guide/grey-gradient) y [degradado monocromo](https://gradiently.design/es/guide/monochrome-gradient) tratan grises suaves y tonales para fondos.

## Qué acabado de plata usar

Cada acabado dice algo ligeramente distinto, así que elígelo por el trabajo y no por costumbre. Una marca puede usar dos sin problema, por ejemplo plata pulida para un logotipo y plata cepillada para los paneles del packaging, siempre que el tinte siga siendo el mismo.

| Acabado | Cómo se ve | Úsalo para |
| --- | --- | --- |
| Pulido | Reflejos nítidos, contraste fuerte, un brillo estrecho e intenso | Logotipos, texto de titulares, gráficos de premios |
| Satinado | Transiciones suaves, brillo delicado, poco contraste | Superficies grandes, packaging, fondos serenos |
| Cepillado | Finas líneas paralelas bajo un brillo suave | Paneles, páginas de producto, marcas técnicas |
| Platino | Brillo frío, intenso, casi blanco | Niveles premium, aniversarios, joyería |
| Peltre | Más oscuro, más cálido, más suave | Herencia, artesanía, moda masculina |

Cinco acabados de plata y dónde encaja cada uno. Todos se construyen con las mismas reglas de iluminación; solo cambian el contraste, el tinte y el espaciado de las paradas.

## Texto y botones plateados en CSS

```css
.silver-text {
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #a7afb9; /* fallback */
  background: linear-gradient(
    135deg,
    #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%,
    #a7afb9 58%, #4b525c 82%, #9aa2ac 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.silver-button {
  padding: 0.85rem 1.6rem;
  border: 1px solid #4b525c;
  border-radius: 999px;
  color: #1c2026;
  font-weight: 600;
  background: linear-gradient(180deg, #f7f9fb 0%, #c9cfd6 48%, #a7afb9 52%, #d9dee3 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgb(0 0 0 / 0.25);
  cursor: pointer;
}

.silver-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d6dbe0 48%, #b3bac3 52%, #e3e7eb 100%);
}

.brushed {
  background:
    repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px);
}
```

Texto de titular plateado, un botón en píldora con reflejo dividido y un panel de metal cepillado. El texto oscuro del botón mantiene legible su etiqueta.

El botón usa un escalón en el medio, del 48 % al 52 %, que se lee como un horizonte reflejado en una superficie curva. [CSS para botones con degradado](https://gradiently.design/es/guide/css-gradient-button) tiene más patrones de botones, y [texto con degradado](https://gradiently.design/es/guide/css-gradient-text) explica el recorte de texto y su compatibilidad entre navegadores.

> **Los grises forman bandas con facilidad** Los degradados grises largos y sutiles son donde más se notan las bandas, sobre todo después de que una plataforma comprima tu imagen. Añade una capa de grano fino y exporta en PNG a tamaño completo. [Bandas en los degradados](https://gradiently.design/es/guide/gradient-banding) explica por qué.

## Diseñar con plata

La plata se lee como moderna, fría y precisa, mientras que el oro se lee como cálido y tradicional. Encaja con lanzamientos tecnológicos, relojes y joyería, aniversarios (la plata es el tradicional del 25.º), campañas de invierno y todo lo que tenga un toque futurista. Como el oro, se ve más valiosa en pequeñas dosis sobre un fondo oscuro: un monograma, una línea fina, un único título.

Una invitación vertical de bodas de plata con luz metálica fría y las palabras Veinticinco años

Una invitación de aniversario donde la luz metálica fría lleva el tema y las palabras se mantienen serenas.

Una publicación vertical de producto que anuncia un reloj de acero sobre un fondo oscuro y frío

Una publicación de producto para un reloj: una superficie oscura y fría con la plata como luz, no como relleno gris plano.

La plata también combina bien con azules helados y azul marino profundo para una paleta de invierno, y con negro y blanco para un aire austero y editorial. [Paletas de colores de lujo](https://gradiently.design/es/guide/luxury-color-palettes) tiene varias combinaciones construidas en torno a metales fríos. En el Studio de Gradiently, un Mark metálico frío se renderiza en vivo detrás de tus palabras en cada tamaño, y la tinta automática elige texto claro u oscuro para cada línea a partir de la propia paleta del Mark, así que las superficies plateadas siguen siendo legibles sin que tengas que comprobar cada formato.

## FAQ

### ¿Cuál es un buen código de degradado plateado?

Prueba `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Va del metal pavonado, pasando por plata clara, a un brillo casi blanco y vuelve.

### ¿Qué códigos hex forman una plata metálica?

Una combinación como #4b525c, #5f6670, #a7afb9, #c9cfd6 y #f7f9fb. Cada uno tira muy ligeramente al azul, lo que evita que parezca gris simple.

### ¿Cómo hago un efecto de metal cepillado en CSS?

Usa un degradado lineal repetido con paradas diminutas separadas uno o dos píxeles en grises cercanos, como `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`.

### ¿Por qué mi degradado plateado se ve gris?

Probablemente le faltan contraste y un brillo. Añade una parada de metal pavonado más oscura, una banda estrecha casi blanca y un leve tinte frío en cada parada.

### ¿Qué diferencia hay entre los degradados de plata y de platino?

En diseño, el platino suele ser una plata algo más fría y brillante con un brillo más blanco, mientras que el peltre es un gris plateado más oscuro y cálido.

### ¿Qué color de fondo hace que la plata se vea mejor?

Los fondos oscuros como negro, carbón, azul marino profundo o azul medianoche. La plata sobre blanco o gris pálido pierde su brillo y tiende a verse plana y deslavada.