Chrome-teksteffect: metallic letters en achtergronden

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

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 behandelt dat tijdperk en zilververloop 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 legt de methode en de browserondersteuning uitgebreider uit.

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

Chrome-tekst in een ontwerpapp

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

Voor meer opties noemt displaylettertypen zware lettertypen per sfeer, en combineert retro-teksteffect chrome met contouren en extrusie voor een volledige jaren-tachtigbehandeling.

Chrome goed krijgen

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.

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.