# Chrome-teksteffect: metallic letters en achtergronden

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

Chrome is niet grijs. Het is een spiegel van de wereld eromheen, samengeperst op het oppervlak van een letter. Als je dat begrijpt, kost overtuigende chrome-tekst één verloop en een paar minuten.

## The short version

- Een chrome-teksteffect bootst gepolijst metaal na, dat zijn omgeving weerspiegelt in plaats van een eigen kleur te hebben.
- Overtuigende chrome-verlopen tonen een lichte lucht boven een scherpe horizonlijn en een donkere grond eronder, met een helderder highlight vlak bij de onderkant.
- In CSS is chrome-tekst een lineair verloop dat met background-clip: text op de letters is bijgesneden en een transparante tekstvulling heeft.
- Chrome werkt het best op zware, brede displaylettertypen op grote formaten, en slecht op dunne of kleine tekst.
- Het luchtdeel van het verloop blauw, roze of violet tinten verandert chrome van industrieel naar retro of Y2K.

Een **chrome-teksteffect** werkt omdat gepolijst metaal bijna geen eigen kleur heeft: het spiegelt zijn omgeving. Op een glimmende letter zie je in de bovenste helft een bleke lucht, een scherpe donkere horizon door het midden en een grond die richting de onderrand weer opklaart. Zet die banden in één verloop met een harde breuk bij de horizon, knip het bij op zware letters en je hebt chrome. Een zachte grijze overgang, wat de meeste mensen als eerste proberen, ziet er gewoon grijs uit.

## Hoe chrome licht weerkaatst

Denk aan een chromen bumper buiten. De bovenste bocht weerspiegelt de lucht, dus is bleek en vaak lichtblauw. Waar het oppervlak naar de grond draait, schakelt de weerspiegeling abrupt over naar het donkere landschap: dat is de horizonlijn, en het is het allerbelangrijkste detail. Eronder wordt de grondreflectie lichter naarmate de bocht weer omhoog draait, en eindigt in een helder randhighlight.

- **Luchtband:** bleek, koel, lichter naar boven toe.
- **Horizon:** een harde stap van licht naar donker vlak onder het midden. Geen zachte overgang.
- **Grondband:** donker bij de horizon, warmer of lichter naar beneden.
- **Randhighlight:** een dunne heldere lijn vlak bij de onderrand.
- **Omtrek:** een donkere rand rond elke letter scheidt het metaal van de achtergrond.

## Chrome-verlopen om te kopiëren

- Klassiek chrome: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)`
- Luchtchrome: `linear-gradient(180deg, #f2f8ff 0%, #b8d4f2 25%, #6d93c4 48%, #1d2533 50%, #3b3a45 64%, #c9b8a8 88%, #fff4e6 94%, #8a7f78 100%)`
- Y2K vloeibaar chrome: `linear-gradient(180deg, #fdf2ff 0%, #e4c6f5 22%, #9fb7f0 48%, #2b2142 49%, #4c3a6b 62%, #f0a8d0 86%, #fff0f8 92%, #8a6f9a 100%)`
- Donker chrome: `linear-gradient(180deg, #9aa3ad 0%, #5d6670 49%, #0d0f12 50%, #1c2026 70%, #6e7782 92%, #2a2f36 100%)`
- Chromen schijf als achtergrond: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)`

Vier letterverlopen en een achtergrond. Let op de bijna-sprong in elk letterverloop rond 48 tot 50%: die harde horizon leest als metaal.

De getinte versies zijn waar chrome interessant wordt. Een blauwe lucht geeft de klassieke look van een autobadge; roze en violet duwen het richting Y2K, dat zwaar leunde op vloeibaar chrome. [Y2K-esthetiek](https://gradiently.design/nl/guide/y2k-aesthetic) behandelt dat tijdperk en [zilververloop](https://gradiently.design/nl/guide/silver-gradient) heeft zachtere, satijnen metalen voor als spiegelchrome te veel is.

## Chrome-tekst in CSS

De techniek is verlooptekst: schilder een verloop als achtergrond van het element, knip het bij op de lettervormen en maak de tekstvulling transparant. Een harde verschoven schaduw, toegepast met `filter` in plaats van `text-shadow` zodat hij achter het bijgesneden verloop zit, geeft de letters gewicht. [Verlooptekst](https://gradiently.design/nl/guide/css-gradient-text) legt de methode en de browserondersteuning uitgebreider uit.

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

Klassieke chrome-tekst. Het verloop beslaat het regelvak, dus houd `line-height` op 1 anders drijft de horizon weg van het midden van de letters.

## Chrome-tekst in een ontwerpapp

1. **Zet eerst het woord** Typ één kort woord in een zwaar displaylettertype op een groot formaat. Zet het alleen om naar contouren als je app live tekst niet met een verloop kan vullen.
2. **Pas een verticale verloopvulling toe** Gebruik de stops van Klassiek chrome hierboven. Zorg dat het verloop van de bovenkant van de letters naar de onderkant loopt, niet over het hele canvas.
3. **Scherp de horizon aan** Sleep de lichte en donkere stop in het midden bijna op elkaar. Ziet het er nog zacht uit, schuif ze dan dichter naar elkaar.
4. **Voeg de rand en het gewicht toe** Een donkere lijn van een of twee pixels, dan een harde schaduw recht omlaag verschoven. Sla vervaagde schaduwen en buitenglans over.

## Lettertypen die bij chrome passen

Chrome heeft oppervlak nodig. Dunne lijnen hebben geen ruimte voor lucht, horizon en grond, dus het effect stort in tot een grijze lijn. Kies zware, brede, bij voorkeur afgeronde of afschuinvriendelijke lettertypen en zet ze groot.

| Lettertype | Karakter | Het best voor |
| --- | --- | --- |
| Rubik Mono One | Zwaar, breed, afgeronde hoeken | Logo’s, losse woorden |
| Bungee | Uithangbord, blokkerig, rechtopstaand | Posters, eventtitels |
| Michroma | Breed, technisch, futuristisch | Tech en motorsport |
| Monoton | Inline-neonstijl, retro | Jaren-tachtig- en discolooks |

Vier gratis displaylettertypen op Google Fonts die een chrome-verloop goed vasthouden. Het zijn allemaal displaylettertypen: gebruik ze nooit voor lopende tekst.

Voor meer opties noemt [displaylettertypen](https://gradiently.design/nl/guide/display-fonts) zware lettertypen per sfeer, en combineert [retro-teksteffect](https://gradiently.design/nl/guide/retro-text-effect) chrome met contouren en extrusie voor een volledige jaren-tachtigbehandeling.

## Chrome goed krijgen

### Ziet er nep uit

- Een zachte overgang van lichtgrijs naar donkergrijs
- Horizon helemaal bovenaan of onderaan
- Chrome op dunne of kleine tekst
- Geen omtrek, zodat letters in de achtergrond smelten
- Zachte gloedhalo’s rond de letters

### Ziet eruit als metaal

- Een harde horizonstap vlak onder het midden
- Lichte lucht erboven, donkere grond eronder
- Zware displayletters op kopformaten
- Een dunne donkere omtrek en een harde verschoven schaduw
- Een effen donkere of verloopachtergrond met ruimte rond het woord

Gebruik chrome voor één woord of een korte titel, nooit voor een alinea. Het is een kopbehandeling voor albumcovers, eventposters, merch, gamekanalen en nostalgische campagnes. Op een drukke achtergrond verdwijnt het, dus geef het een rustig, donkerder vlak.

Een vierkante albumcover met het enkele woord TURBO in zware hoofdletters op een donker vlak

Eén zwaar woord op een donker vlak: de omgeving die chrome-letters nodig hebben om als metaal te lezen.

Een verticale clubavondstory met de titel Night Drive en eronder een korte eenvoudige detailregel

Een verticale story waarin een korte titel de glans draagt en het detail eenvoudig en leesbaar blijft.

In Gradiently geven lettertypebehandelingen zoals Extrusie, Binnenlijn en Contour kopletters diepte, een gegraveerde lijn of een omtrek op een levende Mark, wat goed past bij metallic looks, en de Mark houdt zijn rustigste gebied achter de woorden zodat een glanzende titel nooit met een drukke achtergrond vecht. Voor iriserende glans in plaats van spiegelmetaal, zie [holografisch kleurverloop](https://gradiently.design/nl/guide/holographic-gradients).

## FAQ

### Hoe maak ik een chrome-teksteffect?

Gebruik een verticaal verloop met een bleke luchtband, een harde donkere horizon vlak onder het midden en een lichtere grondband, knip dat bij op zware letters en voeg een dunne donkere omtrek toe.

### Hoe maak ik chrome-tekst in CSS?

Zet een chrome lineair verloop als achtergrond en gebruik dan `background-clip: text` met `-webkit-text-fill-color: transparent`. Voeg `filter: drop-shadow()` toe voor een harde verschoven schaduw.

### Welke kleuren vormen een chrome-verloop?

Bijna wit, bleek blauwgrijs, een heel donker antraciet bij de horizon, middengrijs en een helder highlight vlak bij de onderkant. Tint de lucht blauw, roze of violet voor retroversies.

### Welke lettertypen werken het best voor chrome-tekst?

Zware, brede displaylettertypen zoals Rubik Mono One, Bungee of Michroma, groot gezet. Dunne lettertypen hebben geen ruimte om de weerspiegeling te tonen.

### Wat is het verschil tussen chrome en zilver?

Chrome is een spiegel, met een scherpe horizonreflectie en sterk contrast. Zilver is in ontwerp meestal zachter en satijnachtig, met mildere overgangen.