Krom-texteffekt: metallisk text och bakgrunder

En krom-texteffekt fungerar eftersom polerad metall nästan inte har någon egen färg: den speglar sin omgivning. På en blank bokstav ser du en blek himmel i övre halvan, en skarp mörk horisont tvärs över mitten och en mark som ljusnar igen mot nederkanten. Lägg de banden i en gradient med ett hårt brott vid horisonten, klipp den mot kraftig text och du har krom. En mjuk grå gradient, vilket de flesta provar först, ser bara grå ut.

Så reflekterar krom ljus

Tänk dig en kromad stötfångare utomhus. Den övre kurvan speglar himlen, så den är blek och ofta lätt blå. Där ytan vänder sig mot marken byter reflektionen tvärt till det mörka landskapet: det är horisontlinjen, och den är den allra viktigaste detaljen. Under den ljusnar markreflektionen när kurvan vänder uppåt igen och slutar i en ljus kantdager.

• Himmelsband: blekt, svalt, ljusare mot toppen.
• Horisont: ett hårt steg från ljust till mörkt strax under mitten. Ingen mjuk övergång.
• Markband: mörkt vid horisonten, varmare eller ljusare nedåt.
• Kantdager: en tunn ljus linje nära nederkanten.
• Kontur: en mörk kant runt varje bokstav skiljer metallen från bakgrunden.

Kromgradienter du kan kopiera

De tonade varianterna är där krom blir intressant. En blå himmel ger den klassiska bilemblemlooken; rosa och violetta toner trycker det mot Y2K, som lutade tungt åt flytande krom. Y2K-estetik behandlar den eran, och silvergradient har mjukare, satinlika metaller för när spegelkrom blir för mycket.

Kromtext i CSS

Tekniken är gradienttext: måla en gradient som elementets bakgrund, klipp den mot bokstävernas former och gör textfyllningen genomskinlig. En hård förskjuten skugga, lagd med filter i stället för text-shadow så att den hamnar bakom den klippta gradienten, ger bokstäverna tyngd. Gradienttext förklarar metoden och webbläsarstödet mer ingående.

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

Kromtext i ett designprogram

1. 1

   Sätt ordet först

   Skriv ett kort ord i ett kraftigt rubriktypsnitt i stor storlek. Konvertera till konturer bara om ditt program inte kan fylla levande text med en gradient.

2. 2

   Lägg på en vertikal gradientfyllning

   Använd stoppen från Klassiskt krom ovan. Se till att gradienten löper från bokstävernas topp till botten, inte över hela ytan.

3. 3

   Skärp horisonten

   Dra det ljusa och det mörka stoppet i mitten nästan ovanpå varandra. Ser det fortfarande mjukt ut, flytta dem närmare.

4. 4

   Lägg till kanten och tyngden

   En mörk kontur på en eller två pixlar, sedan en hård skugga rakt nedåt. Hoppa över suddiga skuggor och yttre sken.

Typsnitt som passar krom

Krom behöver yta. Tunna streck har inget utrymme för himmel, horisont och mark, så effekten kollapsar till en grå linje. Välj kraftiga, breda, helst rundade eller fasvänliga typsnitt, och sätt dem stort.

För fler alternativ listar rubriktypsnitt kraftiga typsnitt efter stämning, och retro-texteffekt kombinerar krom med konturer och extrudering för en fullständig åttiotalsbehandling.

Få krom rätt

Använd krom till ett ord eller en kort titel, aldrig ett stycke. Det är en rubrikbehandling för skivomslag, evenemangsaffischer, merch, gamingkanaler och nostalgiska kampanjer. Mot en rörig bakgrund försvinner det, så ge det en lugn, mörkare yta.

I Gradiently ger bokstavsbehandlingar som Extrudering, Innerlinje och Kontur rubriktext djup, en graverad linje eller en kontur ovanpå en levande Mark, vilket passar metalliska looks väl, och Marken behåller sin lugnaste yta bakom orden så att en blank titel aldrig kämpar mot en rörig bakgrund. För irisering snarare än spegelmetall, se holografisk gradient.