La versión corta
- 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.
En esta página
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
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 trata esa versión. Para un metal cálido con la misma lógica, mira degradado dorado.
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 y degradado monocromo 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.
Úsalo para
Úsalo para
Cómo se ve
Úsalo para
Úsalo para
Úsalo para
Texto y botones plateados en 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);
}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 tiene más patrones de botones, y texto con degradado explica el recorte de texto y su compatibilidad entre navegadores.
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 de aniversario donde la luz metálica fría lleva el tema y las palabras se mantienen serenas.
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 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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil