Efecto de texto cromado: tipografía y fondos metálicos

Un efecto de texto cromado funciona porque el metal pulido casi no tiene color propio: refleja su entorno. En una letra brillante ves un cielo pálido en la mitad superior, un horizonte oscuro y nítido por el medio y un suelo que vuelve a aclararse hacia el borde inferior. Pon esas bandas en un solo degradado con un corte duro en el horizonte, recórtalo a una tipografía gruesa y tendrás cromo. Un degradado gris suave, que es lo primero que prueba casi todo el mundo, solo parece gris.

Cómo refleja la luz el cromo

Imagina un parachoques cromado al aire libre. La curva superior refleja el cielo, así que es pálida y a menudo ligeramente azul. Donde la superficie gira hacia el suelo, el reflejo cambia bruscamente al paisaje oscuro: esa es la línea del horizonte, y es el detalle más importante. Debajo, el reflejo del suelo se aclara a medida que la curva vuelve a subir, y termina en un brillo brillante en el borde.

• Banda de cielo: pálida, fría, cada vez más clara hacia arriba.
• Horizonte: un salto duro de claro a oscuro justo debajo del centro. Sin mezcla suave.
• Banda de suelo: oscura en el horizonte, más cálida o más clara hacia abajo.
• Brillo del borde: una línea fina y brillante cerca del borde inferior.
• Contorno: un borde oscuro alrededor de cada letra separa el metal del fondo.

Degradados cromados que puedes copiar

Las versiones teñidas son donde el cromo se pone interesante. Un cielo azul da el aspecto clásico de emblema de coche; los rosas y violetas lo empujan al Y2K, que se apoyó mucho en el cromo líquido. Estética Y2K trata esa época, y degradado plateado tiene metales más suaves y satinados para cuando el cromo espejo es demasiado.

Texto cromado en CSS

La técnica es el texto con degradado: pinta un degradado como fondo del elemento, recórtalo a las formas de las letras y haz transparente el relleno del texto. Una sombra dura desplazada, aplicada con filter y no con text-shadow para que quede detrás del degradado recortado, da peso a las letras. Texto con degradado explica el método y su compatibilidad con navegadores con más detalle.

.chrome {
  font-family: "Rubik Mono One", system-ui, sans-serif;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  color: #a9b4c2; /* fallback where clipping is unsupported */
  background: linear-gradient(
    180deg,
    #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%,
    #2a2e36 49%, #4a4f59 62%,
    #b9bec6 86%, #f4f6f8 92%, #7d838d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #1b1e24;
  filter: drop-shadow(0 4px 0 #1b1e24);
}

Texto cromado en una app de diseño

1. 1

   Escribe primero la palabra

   Escribe una palabra corta en una tipografía de exhibición gruesa a tamaño grande. Conviértela a contornos solo si tu app no puede rellenar texto vivo con un degradado.

2. 2

   Aplica un relleno de degradado vertical

   Usa las paradas del cromo clásico de arriba. Asegúrate de que el degradado vaya de lo alto de las letras a la base, no por todo el lienzo.

3. 3

   Afila el horizonte

   Arrastra las paradas clara y oscura del centro casi una sobre otra. Si aún se ve suave, acércalas más.

4. 4

   Añade el borde y el peso

   Un trazo oscuro de uno o dos píxeles y luego una sombra dura desplazada recta hacia abajo. Evita las sombras desenfocadas y los resplandores exteriores.

Fuentes que encajan con el cromo

El cromo necesita superficie. Los trazos finos no tienen espacio para cielo, horizonte y suelo, así que el efecto se reduce a una línea gris. Elige tipografías gruesas, anchas, idealmente redondeadas o aptas para biselado, y ponlas grandes.

Para más opciones, fuentes de exhibición enumera tipografías gruesas por ambiente, y efecto de texto retro combina el cromo con contornos y extrusión para un tratamiento ochentero completo.

Cómo lograr un buen cromo

Usa el cromo para una palabra o un título corto, nunca para un párrafo. Es un tratamiento de titular para portadas de discos, carteles de eventos, merchandising, canales de juegos y campañas nostálgicas. Sobre un fondo recargado desaparece, así que dale una superficie tranquila y más oscura.

En Gradiently, los tratamientos de rotulación como Relieve, Interior y Contorno dan a la tipografía de titular profundidad, una línea grabada o un contorno sobre un Mark vivo, lo que encaja bien con los looks metálicos, y el Mark mantiene su zona más tranquila detrás de las palabras para que un título brillante nunca pelee con un fondo recargado. Para un brillo iridiscente y no de metal espejo, mira degradado holográfico.