Kromeffekt på tekst: metallisk typografi og bakgrunner

En kromeffekt på tekst virker fordi polert metall nesten ikke har egen farge: det speiler omgivelsene. På en blank bokstav ser du en blek himmel i øvre halvdel, en skarp, mørk horisont over midten og en bakke som lysner igjen mot underkanten. Legg disse båndene i én gradient med et hardt brudd ved horisonten, klipp den til tung typografi, og du har krom. En jevn grå overgang, som de fleste prøver først, ser bare grå ut.

Hvordan krom reflekterer lys

Se for deg en forkrommet støtfanger utendørs. Den øvre kurven speiler himmelen, så den er blek og ofte litt blå. Der overflaten vender seg mot bakken, skifter refleksen brått til det mørke landskapet: det er horisontlinjen, og den er den aller viktigste detaljen. Under den lysner bakkerefleksen etter hvert som kurven vender opp igjen, og ender i et lyst høylys langs kanten.

• Himmelbånd: blekt, kjølig, lysere mot toppen.
• Horisont: et hardt trinn fra lyst til mørkt like under midten. Ingen myk overgang.
• Bakkebånd: mørkt ved horisonten, varmere eller lysere nedover.
• Kanthøylys: en tynn, lys linje nær underkanten.
• Kontur: en mørk kant rundt hver bokstav skiller metallet fra bakgrunnen.

Kromgradienter du kan kopiere

De tonede versjonene er der krom blir interessant. En blå himmel gir det klassiske bilmerket; rosa og fiolett skyver det mot Y2K, som lente seg tungt på flytende krom. Y2K-estetikk dekker den epoken, og sølvgradient har mykere, satinaktige metaller for når speilblank krom blir for mye.

Kromtekst i CSS

Teknikken er gradienttekst: mal en gradient som elementets bakgrunn, klipp den til bokstavformene og gjør tekstfyllet gjennomsiktig. En hard, forskjøvet skygge, lagt på med filter i stedet for text-shadow så den ligger bak den klippede gradienten, gir bokstavene tyngde. Gradienttekst forklarer metoden og nettleserstøtten grundigere.

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

Kromtekst i et designprogram

1. 1

   Sett ordet først

   Skriv ett kort ord i en tung displayskrift i stor størrelse. Gjør det om til konturer bare hvis programmet ikke kan fylle levende tekst med en gradient.

2. 2

   Legg på en loddrett gradientfyll

   Bruk stoppene fra Klassisk krom over. Sørg for at gradienten går fra toppen av bokstavene til bunnen, ikke over hele lerretet.

3. 3

   Skjerp horisonten

   Dra de lyse og mørke stoppene på midten nesten oppå hverandre. Ser det fortsatt mykt ut, flytt dem nærmere.

4. 4

   Legg til kant og tyngde

   En mørk strek på én eller to piksler, og så en hard skygge forskjøvet rett ned. Dropp uskarpe skygger og ytre glød.

Fonter som passer til krom

Krom trenger flate. Tynne strøk har ikke plass til himmel, horisont og bakke, så effekten faller sammen til en grå strek. Velg tunge, brede skrifter, helst avrundede eller egnet for fasett, og sett dem store.

Vil du ha flere alternativer, lister displayfonter tunge skrifter etter stemning, og retroteksteffekt kombinerer krom med konturer og ekstrudering for et fullt åttitallsuttrykk.

Slik får du krom riktig

Bruk krom på ett ord eller en kort tittel, aldri på et avsnitt. Det er en overskriftsbehandling for albumcover, arrangementsplakater, merch, gamingkanaler og nostalgiske kampanjer. Mot en travel bakgrunn forsvinner den, så gi den en rolig, mørkere flate.

I Gradiently gir bokstavbehandlinger som Uttrekk, Innlinje og Kontur overskrifter dybde, en gravert linje eller en kontur oppå en levende Mark, noe som passer godt til metalliske uttrykk, og Marken holder sitt roligste område bak ordene så en blank tittel aldri kjemper mot en travel bakgrunn. Vil du ha iriserende glans i stedet for speilmetall, se holografisk gradient.