# Kromeffekt på tekst: metallisk typografi og bakgrunner

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

Krom er ikke grått. Det er et speil av verden rundt, presset inn på overflaten av en bokstav. Når du forstår det, tar overbevisende kromtekst én gradient og noen få minutter.

## The short version

- En kromeffekt på tekst etterligner polert metall, som speiler omgivelsene i stedet for å ha en egen farge.
- Overbevisende kromgradienter viser en lys himmel over en skarp horisontlinje og en mørk bakke under, med et lysere høylys nær bunnen.
- I CSS er kromtekst en lineær gradient klippet til bokstavene med background-clip: text og en gjennomsiktig tekstfyll.
- Krom fungerer best på tung, bred displaytypografi i store størrelser, og dårlig på tynn eller liten tekst.
- Å tone himmeldelen av gradienten blå, rosa eller fiolett endrer krom fra industrielt til retro eller Y2K.

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

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

Fire tekstgradienter og én bakgrunn. Legg merke til nesten-spranget i hver tekstgradient rundt 48 til 50 %: den harde horisonten er det som leses som metall.

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](https://gradiently.design/nb/guide/y2k-aesthetic) dekker den epoken, og [sølvgradient](https://gradiently.design/nb/guide/silver-gradient) 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](https://gradiently.design/nb/guide/css-gradient-text) forklarer metoden og nettleserstøtten grundigere.

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

Klassisk kromtekst. Gradienten spenner over linjeboksen, så hold `line-height` på 1, ellers glir horisonten bort fra midten av bokstavene.

## Kromtekst i et designprogram

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. **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. **Skjerp horisonten** Dra de lyse og mørke stoppene på midten nesten oppå hverandre. Ser det fortsatt mykt ut, flytt dem nærmere.
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.

| Font | Karakter | Best til |
| --- | --- | --- |
| Rubik Mono One | Tung, bred, avrundede hjørner | Logoer, enkeltord |
| Bungee | Skiltaktig, blokkete, opprett | Plakater, arrangementstitler |
| Michroma | Bred, teknisk, futuristisk | Teknologi og motorsport |
| Monoton | Neonaktig innlinje, retro | Åttitalls- og diskouttrykk |

Fire gratis displayskrifter på Google Fonts som bærer en kromgradient godt. Alle er displayfonter: bruk dem aldri til brødtekst.

Vil du ha flere alternativer, lister [displayfonter](https://gradiently.design/nb/guide/display-fonts) tunge skrifter etter stemning, og [retroteksteffekt](https://gradiently.design/nb/guide/retro-text-effect) kombinerer krom med konturer og ekstrudering for et fullt åttitallsuttrykk.

## Slik får du krom riktig

### Ser falskt ut

- En jevn overgang fra lysegrå til mørkegrå
- Horisonten helt øverst eller nederst
- Krom på tynn eller liten tekst
- Ingen kontur, så bokstavene smelter inn i bakgrunnen
- Myke glorier av glød rundt bokstavene

### Ser ut som metall

- Et hardt horisonttrinn like under midten
- Lys himmel over, mørk bakke under
- Tung displaytypografi i overskriftsstørrelse
- En tynn, mørk kontur og en hard, forskjøvet skygge
- En enkel mørk bakgrunn eller gradient med luft rundt ordet

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.

Et kvadratisk albumcover med ordet TURBO i tunge versaler på en mørk flate

Ett tungt ord på en mørk flate: rammen kromtekst trenger for å leses som metall.

En vertikal story for en klubbkveld med tittelen Night Drive og en kort, enkel detaljlinje under

En vertikal story der en kort tittel bærer glansen og detaljen holder seg enkel og lesbar.

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

## FAQ

### Hvordan lager jeg en kromeffekt på tekst?

Bruk en loddrett gradient med et blekt himmelbånd, en hard, mørk horisont like under midten og et lysere bakkebånd, klipp den til tung typografi og legg til en tynn, mørk kontur.

### Hvordan lager jeg kromtekst i CSS?

Sett en lineær kromgradient som bakgrunn, og bruk så `background-clip: text` med `-webkit-text-fill-color: transparent`. Legg til `filter: drop-shadow()` for en hard, forskjøvet skygge.

### Hvilke farger gir en kromgradient?

Nesten hvitt, blek blågrå, en svært mørk koksgrå ved horisonten, mellomgrå og et lyst høylys nær bunnen. Ton himmelen blå, rosa eller fiolett for retroversjoner.

### Hvilke fonter fungerer best til kromtekst?

Tunge, brede displayfonter som Rubik Mono One, Bungee eller Michroma, satt store. Tynne fonter har ikke plass til at refleksen synes.

### Hva er forskjellen på krom og sølv?

Krom er et speil, med en skarp horisontrefleks og sterk kontrast. Sølv i design er som regel mykere og satinaktig, med roligere overganger.