# Krom-teksteffekt: metallisk skrift og baggrunde

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

Krom er ikke gråt. Det er et spejl af verden omkring det, presset ind på overfladen af et bogstav. Når du har forstået det, kræver overbevisende kromskrift én gradient og et par minutter.

## The short version

- En krom-teksteffekt efterligner poleret metal, som spejler sine omgivelser frem for at have en farve af sig selv.
- Overbevisende kromgradienter viser en lys himmel over en skarp horisontlinje og en mørk jord under, med et lysere højlys nær bunden.
- I CSS er kromtekst en lineær gradient, der er beskåret til bogstaverne med background-clip: text og en gennemsigtig tekstfyldning.
- Krom virker bedst på tung, bred displayskrift i store størrelser og dårligt på tynd eller lille tekst.
- Når du farver himmeldelen af gradienten blå, pink eller violet, skifter krom fra industrielt til retro eller Y2K.

En **krom-teksteffekt** virker, fordi poleret metal næsten ikke har nogen farve selv: det spejler sine omgivelser. På et blankt bogstav ser du en bleg himmel i den øvre halvdel, en skarp mørk horisont på tværs af midten og en jord, der bliver lysere igen mod den nederste kant. Læg de bånd ind i én gradient med et hårdt brud ved horisonten, beskær den til tung skrift, og du har krom. En jævn grå overgang, som er det, de fleste prøver først, ligner bare gråt.

## Sådan reflekterer krom lys

Forestil dig en kromstødfanger udendørs. Den øverste kurve spejler himlen, så den er bleg og ofte svagt blå. Hvor overfladen vender ned mod jorden, skifter refleksionen brat til det mørke landskab: det er horisontlinjen, og det er den vigtigste enkeltdetalje. Under den bliver jordrefleksionen lysere, når kurven vender op igen, og ender i et skarpt højlys langs kanten.

- **Himmelbånd:** blegt, køligt og lysere mod toppen.
- **Horisont:** et hårdt trin fra lys til mørk lige under midten. Ingen blød overgang.
- **Jordbånd:** mørkt ved horisonten og varmere eller lysere nedad.
- **Højlys langs kanten:** en tynd lys linje nær den nederste kant.
- **Kontur:** en mørk kant rundt om hvert bogstav adskiller metallet fra baggrunden.

## 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%)`
- Y2K flydende 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%)`
- Baggrund med kromskive: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)`

Fire skriftgradienter og én baggrund. Læg mærke til det næsten øjeblikkelige spring omkring 48 til 50 % i hver skriftgradient: den hårde horisont er det, der læses som metal.

De farvede versioner er der, hvor krom bliver interessant. En blå himmel giver den klassiske bilemblem-look; pink og violet skubber det mod Y2K, som læssede på med flydende krom. [Y2K-æstetik](https://gradiently.design/da/guide/y2k-aesthetic) handler om den tid, og [sølvgradient](https://gradiently.design/da/guide/silver-gradient) har blødere, satinagtige metaller, når spejlkrom bliver for meget.

## Kromtekst i CSS

Teknikken er gradienttekst: mal en gradient som elementets baggrund, beskær den til bogstavernes former, og gør tekstfyldningen gennemsigtig. En hård forskudt skygge, lagt på med `filter` frem for `text-shadow`, så den ligger bag den beskårne gradient, giver bogstaverne vægt. [Gradienttekst](https://gradiently.design/da/guide/css-gradient-text) forklarer metoden og browserunderstøttelsen mere grundigt.

```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 kromskrift. Gradienten spænder over linjeboksen, så hold `line-height` på 1, ellers driver horisonten væk fra midten af bogstaverne.

## Kromtekst i et designprogram

1. **Sæt ordet først** Skriv ét kort ord i en tung displayskrift i en stor størrelse. Konvertér det kun til konturer, hvis dit program ikke kan fylde levende tekst med en gradient.
2. **Læg en lodret gradientfyldning på** Brug stoppene fra Klassisk krom ovenfor. Sørg for, at gradienten løber fra toppen af bogstaverne til bunden, ikke hen over hele lærredet.
3. **Gør horisonten skarp** Træk de lyse og mørke stop i midten næsten oven i hinanden. Ser det stadig blødt ud, så flyt dem tættere.
4. **Tilføj kanten og vægten** En mørk streg på en eller to pixel og så en hård skygge, der flyttes lige ned. Spring slørede skygger og ydre glød over.

## Skrifttyper, der passer til krom

Krom har brug for overflade. Tynde streger har ikke plads til himmel, horisont og jord, så effekten falder sammen til en grå streg. Vælg tunge, brede, helst afrundede eller affasningsvenlige skrifttyper, og sæt dem stort.

| Skrifttype | Karakter | Bedst til |
| --- | --- | --- |
| Rubik Mono One | Tung, bred, afrundede hjørner | Logoer, enkelte ord |
| Bungee | Skiltestil, blokket, opretstående | Plakater, begivenhedstitler |
| Michroma | Bred, teknisk, futuristisk | Tech og motorsport |
| Monoton | Neonstil med indre streg, retro | 80'er- og disco-looks |

Fire gratis displayskrifter på Google Fonts, der holder en kromgradient godt. Alle er displayskrifter: brug dem aldrig til brødtekst.

For flere muligheder viser [displayskrifter](https://gradiently.design/da/guide/display-fonts) tunge skrifttyper efter stemning, og [retro-teksteffekt](https://gradiently.design/da/guide/retro-text-effect) kombinerer krom med konturer og extrusion til en hel 80'er-behandling.

## Sådan rammer du krom rigtigt

### Ser falsk ud

- En jævn overgang fra lysegrå til mørkegrå
- Horisonten helt oppe eller nede
- Krom på tynd eller lille tekst
- Ingen kontur, så bogstaverne smelter ind i baggrunden
- Bløde glødehaloer rundt om bogstaverne

### Ser ud som metal

- Et hårdt horisonttrin lige under midten
- Lys himmel over, mørk jord under
- Tung displayskrift i overskriftsstørrelse
- En tynd mørk kontur og en hård forskudt skygge
- En enkel mørk eller gradientbaggrund med plads omkring ordet

Brug krom til ét ord eller en kort titel, aldrig et afsnit. Det er en overskriftsbehandling til pladecovers, plakater, merchandise, gamingkanaler og nostalgiske kampagner. Mod en travl baggrund forsvinder det, så giv det en rolig, mørkere flade.

Et kvadratisk pladecover med det enkelte ord TURBO i tunge versaler på en mørk flade

Ét tungt ord på en mørk flade: de rammer, kromskrift skal have for at læses som metal.

En lodret story til en klubaften med titlen Night Drive og en kort enkel detaljelinje under

En lodret story, hvor en kort titel bærer glansen, og detaljen forbliver enkel og læselig.

I Gradiently giver Lettering-behandlinger som Dybde, Indre linje og Kontur overskriftsskrift dybde, en indgraveret linje eller en kontur oven på en levende Mark, hvilket klæder metalliske looks, og Marken holder sit roligste område bag ordene, så en blank titel aldrig kæmper mod en travl baggrund. Til iriserende glans frem for spejlmetal, se [holografisk gradient](https://gradiently.design/da/guide/holographic-gradients).

## FAQ

### Hvordan laver jeg en krom-teksteffekt?

Brug en lodret gradient med et blegt himmelbånd, en hård mørk horisont lige under midten og et lysere jordbånd, beskær den til tung skrift, og tilføj en tynd mørk kontur.

### Hvordan laver jeg kromtekst i CSS?

Sæt en lineær kromgradient som baggrund, og brug så `background-clip: text` med `-webkit-text-fill-color: transparent`. Tilføj `filter: drop-shadow()` til en hård forskudt skygge.

### Hvilke farver udgør en kromgradient?

Næsten hvid, bleg blågrå, en meget mørk trækul ved horisonten, mellemgrå og et skarpt højlys nær bunden. Giv himlen en blå, pink eller violet tone til retroversioner.

### Hvilke skrifttyper virker bedst til kromtekst?

Tunge, brede displayskrifter som Rubik Mono One, Bungee eller Michroma, sat stort. Tynde skrifttyper har ikke plads til, at refleksionen kan vises.

### Hvad er forskellen på krom og sølv?

Krom er et spejl med en skarp horisontrefleksion og stærk kontrast. Sølv i design er som regel blødere og satinagtigt, med mildere overgange.