# Kromiteksti: metallinen tekstitehoste ja taustat

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

Kromi ei ole harmaata. Se on kirjaimen pintaan puristettu peili ympäröivästä maailmasta. Kun ymmärrät tämän, uskottava kromiteksti syntyy yhdellä liukuvärillä muutamassa minuutissa.

## The short version

- Kromiteksti jäljittelee kiillotettua metallia, joka heijastaa ympäristöään oman värin sijaan.
- Uskottavassa kromiliukuvärissä vaalea taivas on terävän horisontin yllä, tumma maa sen alla ja kirkkaampi heijastus lähellä alareunaa.
- CSS:ssä kromiteksti tehdään lineaarisella liukuvärillä, joka rajataan kirjaimiin asetuksella background-clip: text ja läpinäkyvällä tekstin täytöllä.
- Kromi toimii parhaiten suurissa, paksuissa ja leveissä otsikkofonteissa ja huonosti ohuessa tai pienessä tekstissä.
- Liukuvärin taivasosan sävyttäminen siniseksi, vaaleanpunaiseksi tai violetiksi muuttaa kromin teollisesta retroksi tai Y2K-henkiseksi.

**Kromiteksti** toimii, koska kiillotetulla metallilla ei juuri ole omaa väriä: se peilaa ympäristöään. Kiiltävän kirjaimen yläosassa näkyy vaalea taivas, keskellä terävä tumma horisontti ja alareunaa kohti taas vaaleneva maa. Yhdistä nämä kaistat yhdeksi liukuväriksi, jätä horisonttiin jyrkkä katkos ja rajaa täyttö paksuun tekstiin. Siinä on kromi. Tasainen harmaa häivytys, jota useimmat kokeilevat ensin, näyttää vain harmaalta.

## Miten kromi heijastaa valoa

Kuvittele krominen auton puskuri ulkona. Yläkaari heijastaa taivasta, joten se on vaalea ja usein hieman sinertävä. Kun pinta kääntyy kohti maata, heijastus vaihtuu äkisti tummaan maisemaan. Tämä horisonttiviiva on tärkein yksittäinen yksityiskohta. Sen alapuolella maan heijastus vaalenee kaaren kääntyessä taas ylöspäin ja päättyy kirkkaaseen reunakiiltoon.

- **Taivaskaista:** vaalea ja viileä, vaalenee ylöspäin.
- **Horisontti:** jyrkkä askel vaaleasta tummaan hieman keskikohdan alapuolella. Ei pehmeää sekoitusta.
- **Maakaista:** horisontissa tumma, lämpenee tai vaalenee alaspäin.
- **Reunakiilto:** ohut kirkas viiva lähellä alareunaa.
- **Ääriviiva:** tumma reuna erottaa jokaisen metallikirjaimen taustasta.

## Kopioitavat kromiliukuvärit

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

Neljä tekstiliukuväriä ja yksi tausta. Huomaa lähes äkillinen hyppy jokaisessa tekstiliukuvärissä noin kohdassa 48 ja 50 %: jyrkkä horisontti saa pinnan näyttämään metallilta.

Sävytetyt versiot tekevät kromista kiinnostavan. Sininen taivas tuo mieleen klassisen auton tunnuksen; vaaleanpunainen ja violetti vievät kohti Y2K-ilmettä, jossa nestemäistä kromia käytettiin paljon. [Y2K-estetiikka](https://gradiently.design/fi/guide/y2k-aesthetic) käsittelee tuota aikaa, ja [hopealiukuväri](https://gradiently.design/fi/guide/silver-gradient) tarjoaa pehmeämpiä satiinimetalleja, kun peilikromi on liikaa.

## Kromiteksti CSS:llä

Menetelmä on sama kuin liukuväritekstissä: maalaa liukuväri elementin taustaksi, rajaa se kirjainten muotoihin ja tee tekstin täytöstä läpinäkyvä. Terävä siirretty varjo antaa kirjaimille painoa. Käytä `filter`-ominaisuutta `text-shadow`-ominaisuuden sijaan, jotta varjo asettuu rajatun liukuvärin taakse. [Liukuväriteksti](https://gradiently.design/fi/guide/css-gradient-text) selittää menetelmän ja selaintuen tarkemmin.

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

Klassinen kromiteksti. Liukuväri ulottuu rivikehyksen yli, joten pidä `line-height` arvossa 1, jottei horisontti siirry pois kirjainten keskeltä.

## Kromiteksti suunnitteluohjelmassa

1. **Kirjoita ensin sana** Kirjoita yksi lyhyt sana suurella ja paksulla otsikkofontilla. Muunna teksti poluiksi vain, jos ohjelmasi ei pysty täyttämään muokattavaa tekstiä liukuvärillä.
2. **Lisää pystysuuntainen liukuväritäyttö** Käytä yllä olevan klassisen kromin väripisteitä. Varmista, että liukuväri kulkee kirjainten yläreunasta alareunaan eikä koko piirtoalueen yli.
3. **Terävöitä horisontti** Vedä keskikohdan vaalea ja tumma väripiste lähes päällekkäin. Jos raja näyttää yhä pehmeältä, siirrä niitä lähemmäs.
4. **Lisää reuna ja paino** Lisää yhden tai kahden pikselin tumma ääriviiva ja sitten terävä varjo suoraan alaspäin. Jätä sumeat varjot ja ulkohehkut pois.

## Kromiin sopivat fontit

Kromi tarvitsee pinta-alaa. Ohuisiin vetoihin ei mahdu taivasta, horisonttia ja maata, joten tehoste kutistuu harmaaksi viivaksi. Valitse paksu, leveä ja mieluiten pyöristetty tai viisteille sopiva fontti ja käytä sitä suurena.

| Fontti | Luonne | Paras käyttö |
| --- | --- | --- |
| Rubik Mono One | Paksu, leveä, pyöristetyt kulmat | Logot, yksittäiset sanat |
| Bungee | Kylttimäinen, kulmikas, pystysuora | Julisteet, tapahtumien otsikot |
| Michroma | Leveä, tekninen, futuristinen | Teknologia ja moottoriurheilu |
| Monoton | Sisäviivallinen neontyyli, retro | 1980-luvun ja diskon ilmeet |

Neljä ilmaista Google Fonts -otsikkofonttia, joissa kromiliukuväri toimii hyvin. Kaikki ovat otsikkofontteja: älä käytä niitä leipätekstissä.

Lisää vaihtoehtoja löydät [otsikkofonteista](https://gradiently.design/fi/guide/display-fonts), joissa paksut fontit on järjestetty tunnelman mukaan. [Retro-tekstitehoste](https://gradiently.design/fi/guide/retro-text-effect) yhdistää kromin ääriviivoihin ja syvyyteen täydellistä 1980-luvun ilmettä varten.

## Näin kromi näyttää uskottavalta

### Näyttää keinotekoiselta

- Tasainen häivytys vaaleanharmaasta tummanharmaaseen
- Horisontti aivan ylä- tai alareunassa
- Kromi ohuessa tai pienessä tekstissä
- Ei ääriviivaa, joten kirjaimet sulautuvat taustaan
- Pehmeät hehkukehät kirjainten ympärillä

### Näyttää metallilta

- Jyrkkä horisonttiraja hieman keskikohdan alapuolella
- Vaalea taivas ylhäällä, tumma maa alhaalla
- Paksu otsikkofontti suuressa koossa
- Ohut tumma ääriviiva ja terävä siirretty varjo
- Yksinkertainen tumma tai liukuväritausta, sanan ympärillä tilaa

Käytä kromia yhdessä sanassa tai lyhyessä otsikossa, älä kokonaisessa kappaleessa. Se sopii albumikansiin, tapahtumajulisteisiin, fanituotteisiin, pelikanaviin ja nostalgisiin kampanjoihin. Levottomalla taustalla se katoaa, joten anna sille rauhallinen ja tummempi pinta.

Neliönmuotoinen albumikansi, jossa lukee TURBO paksuin suuraakkosin tummalla pinnalla

Yksi paksu sana tummalla pinnalla: kromiteksti tarvitsee tällaisen ympäristön näyttääkseen metallilta.

Pystysuuntainen klubi-illan tarina otsikolla Yöajo ja lyhyt selkeä lisätietorivi sen alla

Pystytarinan lyhyt otsikko kantaa kiiltoa, ja lisätiedot pysyvät yksinkertaisina ja luettavina.

Gradientlyn tekstikäsittelyt Kohotettu, Sisäviiva ja Käyrät antavat otsikkotekstille syvyyttä, kaiverretun viivan tai ääriviivan elävän Markin päällä. Ne sopivat metallisiin ilmeisiin. Mark pitää rauhallisimman alueensa sanojen takana, jotta kiiltävä otsikko ei taistele levottoman taustan kanssa. Jos haluat peilimetallin sijaan sateenkaaren kiiltoa, katso [holografinen liukuväri](https://gradiently.design/fi/guide/holographic-gradients).

## FAQ

### Miten teen kromitekstitehosteen?

Käytä pystysuuntaista liukuväriä, jossa on vaalea taivaskaista, jyrkkä tumma horisontti hieman keskikohdan alapuolella ja vaaleampi maakaista. Rajaa se paksuun tekstiin ja lisää ohut tumma ääriviiva.

### Miten teen kromitekstiä CSS:llä?

Aseta krominen lineaarinen liukuväri taustaksi ja käytä sitten `background-clip: text` sekä `-webkit-text-fill-color: transparent`. Lisää terävä siirretty varjo asetuksella `filter: drop-shadow()`.

### Mistä väreistä kromiliukuväri koostuu?

Lähes valkoisesta, vaaleasta siniharmaasta, hyvin tummasta hiilenharmaasta horisontissa, keskiharmaasta ja kirkkaasta heijastuksesta alhaalla. Sävytä taivas siniseksi, vaaleanpunaiseksi tai violetiksi retroversioissa.

### Mitkä fontit sopivat parhaiten kromitekstiin?

Suuret, paksut ja leveät otsikkofontit, kuten Rubik Mono One, Bungee tai Michroma. Ohuissa fonteissa ei ole tilaa heijastukselle.

### Mitä eroa kromilla ja hopealla on?

Kromi on peili, jossa on terävä horisonttiheijastus ja vahva kontrasti. Hopea on suunnittelussa yleensä pehmeämpi ja satiininen, ja sen siirtymät ovat loivempia.