# Krom-texteffekt: metallisk text och bakgrunder [Canonical HTML page](https://gradiently.design/sv/guide/chrome-effect) Krom är inte grått. Det är en spegel av världen omkring, hoppressad på en bokstavs yta. När du förstått det tar övertygande kromtext en gradient och några minuter. ## The short version - En krom-texteffekt imiterar polerad metall, som speglar sin omgivning i stället för att ha en egen färg. - Övertygande kromgradienter visar en ljus himmel över en skarp horisontlinje och mörk mark under, med en ljusare högdager nära botten. - I CSS är kromtext en linjär gradient som klipps mot bokstäverna med background-clip: text och en genomskinlig textfyllning. - Krom fungerar bäst på kraftig, bred rubriktext i stora storlekar och dåligt på tunn eller liten text. - Att tona himmelsdelen av gradienten blå, rosa eller violett förvandlar krom från industriellt till retro eller Y2K. 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 - Klassiskt krom: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)` - Himmelskrom: `linear-gradient(180deg, #f2f8ff 0%, #b8d4f2 25%, #6d93c4 48%, #1d2533 50%, #3b3a45 64%, #c9b8a8 88%, #fff4e6 94%, #8a7f78 100%)` - Y2K flytande krom: `linear-gradient(180deg, #fdf2ff 0%, #e4c6f5 22%, #9fb7f0 48%, #2b2142 49%, #4c3a6b 62%, #f0a8d0 86%, #fff0f8 92%, #8a6f9a 100%)` - Mörkt krom: `linear-gradient(180deg, #9aa3ad 0%, #5d6670 49%, #0d0f12 50%, #1c2026 70%, #6e7782 92%, #2a2f36 100%)` - Bakgrund med kromskiva: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)` Fyra textgradienter och en bakgrund. Lägg märke till det nästan abrupta hoppet vid 48 till 50 % i varje textgradient: den hårda horisonten är det som läses som metall. 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](https://gradiently.design/sv/guide/y2k-aesthetic) behandlar den eran, och [silvergradient](https://gradiently.design/sv/guide/silver-gradient) 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](https://gradiently.design/sv/guide/css-gradient-text) förklarar metoden och webbläsarstödet mer ingående. ```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 kromtext. Gradienten sträcker sig över radboxen, så håll `line-height` på 1 annars driver horisonten bort från bokstävernas mitt. ## Kromtext i ett designprogram 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. **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. **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. **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. | Typsnitt | Karaktär | Bäst för | | --- | --- | --- | | Rubik Mono One | Kraftigt, brett, rundade hörn | Logotyper, enstaka ord | | Bungee | Skyltstil, kantigt, upprätt | Affischer, evenemangstitlar | | Michroma | Brett, tekniskt, futuristiskt | Teknik och motorsport | | Monoton | Neonstil med inre linje, retro | Åttiotals- och discolooks | Fyra gratis rubriktypsnitt på Google Fonts som bär en kromgradient väl. Alla är rubriktypsnitt: använd dem aldrig till brödtext. För fler alternativ listar [rubriktypsnitt](https://gradiently.design/sv/guide/display-fonts) kraftiga typsnitt efter stämning, och [retro-texteffekt](https://gradiently.design/sv/guide/retro-text-effect) kombinerar krom med konturer och extrudering för en fullständig åttiotalsbehandling. ## Få krom rätt ### Ser falskt ut - En mjuk gradient från ljusgrått till mörkgrått - Horisonten placerad allra överst eller nederst - Krom på tunn eller liten text - Ingen kontur, så bokstäverna smälter in i bakgrunden - Mjuka glödhalor runt bokstäverna ### Ser ut som metall - Ett hårt horisontsteg strax under mitten - Ljus himmel över, mörk mark under - Kraftig rubriktext i rubrikstorlekar - En tunn mörk kontur och en hård förskjuten skugga - En enkel mörk eller gradientbakgrund med luft runt ordet 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. Ett kvadratiskt skivomslag med det enda ordet TURBO i kraftiga versaler på en mörk yta Ett kraftigt ord på en mörk yta: miljön kromtext behöver för att läsas som metall. En stående story för en klubbkväll med titeln Night Drive och en kort enkel detaljrad under En stående story där en kort titel bär glansen och detaljen förblir enkel och läsbar. 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](https://gradiently.design/sv/guide/holographic-gradients). ## FAQ ### Hur gör jag en krom-texteffekt? Använd en vertikal gradient med ett blekt himmelsband, en hård mörk horisont strax under mitten och ett ljusare markband, klipp den mot kraftig text och lägg till en tunn mörk kontur. ### Hur gör jag kromtext i CSS? Sätt en linjär kromgradient som bakgrund och använd sedan `background-clip: text` med `-webkit-text-fill-color: transparent`. Lägg till `filter: drop-shadow()` för en hård förskjuten skugga. ### Vilka färger ger en kromgradient? Nästan vitt, blekt blågrått, ett mycket mörkt kolgrått vid horisonten, mellangrått och en ljus högdager nära botten. Tona himlen blå, rosa eller violett för retroversioner. ### Vilka typsnitt fungerar bäst för kromtext? Kraftiga, breda rubriktypsnitt som Rubik Mono One, Bungee eller Michroma, satta stort. Tunna typsnitt har inget utrymme för reflektionen att synas. ### Vad är skillnaden mellan krom och silver? Krom är en spegel, med en skarp horisontreflektion och stark kontrast. Silver i design är oftast mjukare och satinlikt, med lenare övergångar.