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

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

El cromo no es gris. Es un espejo del mundo que lo rodea, comprimido sobre la superficie de una letra. Cuando lo entiendes, una tipografía cromada convincente cuesta un degradado y unos minutos.

## The short version

- Un efecto de texto cromado imita el metal pulido, que refleja su entorno en lugar de tener un color propio.
- Los degradados cromados convincentes muestran un cielo claro sobre una línea de horizonte nítida y un suelo oscuro debajo, con un brillo más intenso cerca de la base.
- En CSS, el texto cromado es un degradado lineal recortado a las letras con background-clip: text y un relleno de texto transparente.
- El cromo funciona mejor en tipografía de exhibición gruesa y ancha en tamaños grandes, y mal en texto fino o pequeño.
- Teñir la parte del cielo del degradado de azul, rosa o violeta cambia el cromo de industrial a retro o Y2K.

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

- Cromo clásico: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)`
- Cromo cielo: `linear-gradient(180deg, #f2f8ff 0%, #b8d4f2 25%, #6d93c4 48%, #1d2533 50%, #3b3a45 64%, #c9b8a8 88%, #fff4e6 94%, #8a7f78 100%)`
- Cromo líquido Y2K: `linear-gradient(180deg, #fdf2ff 0%, #e4c6f5 22%, #9fb7f0 48%, #2b2142 49%, #4c3a6b 62%, #f0a8d0 86%, #fff0f8 92%, #8a6f9a 100%)`
- Cromo oscuro: `linear-gradient(180deg, #9aa3ad 0%, #5d6670 49%, #0d0f12 50%, #1c2026 70%, #6e7782 92%, #2a2f36 100%)`
- Fondo de disco cromado: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)`

Cuatro degradados de texto y un fondo. Fíjate en el salto casi instantáneo de cada degradado de texto hacia el 48 o el 50 %: ese horizonte duro es lo que se lee como metal.

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](https://gradiently.design/es/guide/y2k-aesthetic) trata esa época, y [degradado plateado](https://gradiently.design/es/guide/silver-gradient) 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](https://gradiently.design/es/guide/css-gradient-text) explica el método y su compatibilidad con navegadores con más detalle.

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

Tipografía cromada clásica. El degradado abarca la caja de línea, así que mantén `line-height` en 1 o el horizonte se aleja del centro de las letras.

## Texto cromado en una app de diseño

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. **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. **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. **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.

| Fuente | Carácter | Ideal para |
| --- | --- | --- |
| Rubik Mono One | Gruesa, ancha, esquinas redondeadas | Logotipos, palabras sueltas |
| Bungee | Rotulación, maciza, vertical | Carteles, títulos de eventos |
| Michroma | Ancha, técnica, futurista | Tecnología y motor |
| Monoton | Estilo neón de línea interior, retro | Looks ochenteros y disco |

Cuatro tipografías de exhibición gratuitas de Google Fonts que sostienen bien un degradado cromado. Todas son fuentes de exhibición: nunca las uses para el cuerpo de texto.

Para más opciones, [fuentes de exhibición](https://gradiently.design/es/guide/display-fonts) enumera tipografías gruesas por ambiente, y [efecto de texto retro](https://gradiently.design/es/guide/retro-text-effect) combina el cromo con contornos y extrusión para un tratamiento ochentero completo.

## Cómo lograr un buen cromo

### Parece falso

- Un degradado suave de gris claro a gris oscuro
- Horizonte colocado en lo más alto o lo más bajo
- Cromo en texto fino o pequeño
- Sin contorno, así que las letras se funden con el fondo
- Halos de resplandor suave alrededor de las letras

### Parece metal

- Un salto de horizonte duro justo debajo del centro
- Cielo claro arriba, suelo oscuro abajo
- Tipografía de exhibición gruesa en tamaños de titular
- Un contorno oscuro fino y una sombra dura desplazada
- Un fondo oscuro liso o con degradado y espacio alrededor de la palabra

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.

Una portada cuadrada de álbum con la sola palabra TURBO en mayúsculas gruesas sobre una superficie oscura

Una palabra gruesa sobre una superficie oscura: el escenario que necesita la tipografía cromada para leerse como metal.

Una historia vertical de noche de club titulada Night Drive con una línea de detalle breve y sencilla debajo

Una historia vertical donde un título corto lleva el brillo y el detalle se mantiene sencillo y legible.

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

## FAQ

### ¿Cómo hago un efecto de texto cromado?

Usa un degradado vertical con una banda de cielo pálida, un horizonte oscuro y duro justo debajo del centro y una banda de suelo más clara, luego recórtalo a una tipografía gruesa y añade un contorno oscuro fino.

### ¿Cómo hago texto cromado en CSS?

Pon un degradado lineal cromado como fondo y luego usa `background-clip: text` con `-webkit-text-fill-color: transparent`. Añade `filter: drop-shadow()` para una sombra dura desplazada.

### ¿Qué colores forman un degradado cromado?

Casi blanco, gris azulado pálido, un carbón muy oscuro en el horizonte, gris medio y un brillo intenso cerca de la base. Tiñe el cielo de azul, rosa o violeta para versiones retro.

### ¿Qué fuentes funcionan mejor para el texto cromado?

Tipografías de exhibición gruesas y anchas como Rubik Mono One, Bungee o Michroma, en tamaño grande. Las fuentes finas no tienen espacio para que se vea el reflejo.

### ¿Qué diferencia hay entre el cromo y la plata?

El cromo es un espejo, con un reflejo de horizonte nítido y un contraste fuerte. La plata en diseño suele ser más suave y satinada, con transiciones más delicadas.