Krom-teksteffekt: metallisk skrift og baggrunde

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

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 handler om den tid, og sølvgradient 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 forklarer metoden og browserunderstøttelsen mere grundigt.

.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

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

For flere muligheder viser displayskrifter tunge skrifttyper efter stemning, og retro-teksteffekt kombinerer krom med konturer og extrusion til en hel 80'er-behandling.

Sådan rammer du krom rigtigt

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.

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.