# Hohtoefekti: pehmeää valoa ilman kehää tekstin ympärillä

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

Hohto näyttää pinnalle lankeavalta valolta: kirkas ydin, pitkä häivytys ja tumma ympäristö. Sijoita se muotojen taakse ja taustoihin, etäälle kirjainten reunoista.

## The short version

- Hohtoefektissä kirkas väriydin häipyy vähitellen tummempaan ympäristöön, jolloin se näyttää valolta eikä maalilta.
- Hohto toimii parhaiten muodoissa, painikkeissa, tuotekuvissa ja taustoissa, joissa se lisää syvyyttä ja ohjaa katsetta.
- Tekstiä ympäröivä hohto sumentaa kirjainten reunat ja vaikeuttaa lukemista, joten pidä sanat terävinä ja sijoita valo muualle.
- CSS:ssä pehmeä hohto tehdään yleensä läpinäkyväksi häipyvällä säteittäisellä liukuvärillä tai laajasti sumennetulla laatikkovarjolla ilman siirtymää.
- Hohto tarvitsee tumman tai hillityn pohjan näkyäkseen, ja pieni rakeisuus ehkäisee pitkän häivytyksen raidoittumista.

**Hohtoefekti** on valoläikkä: kirkas väriydin häipyy hitaasti tummempaan ympäristöön, kuin lamppu olisi aivan pinnan takana. Hyvin käytettynä se lisää litteään sommitelmaan syvyyttä ja vetää katseen tuotteeseen, painikkeeseen tai muotoon. Huonosti käytettynä se on sumea rengas otsikon ympärillä. Tämän sivun sääntö on yksinkertainen: sijoita hohto muotoihin ja taustoihin ja pidä sanat terävinä.

## Mihin hohto kuuluu

Valo esineen ympärillä kertoo sen tärkeydestä. Kirjainten ympärillä se tekee muuta: pehmentää reunoja, vähentää viivan ja taustan kontrastia ja saa rivin näyttämään epätarkalta pienellä näytöllä. Sijoita hohto sanojen lähelle, älä niiden ympärille. Jos teksti tarvitsee apua luettavuuteen, korjaa sen takainen alue. [Vaihtoehdot tekstivarjolle](https://gradiently.design/fi/guide/text-shadow-alternatives) esittelee siistimmät keinot.

### Vältä

- Otsikkoon takertuvaa sumeaa kehää
- Tekstin väristä hohtoa
- Useita yhtä voimakkaita kilpailevia hohtoja
- Kirkasta hohtoa kirkkaalla taustalla
- Hohtoa joka painikkeessa, kortissa ja kuvakkeessa

### Tee näin

- Valo tuotteen, muodon tai kuvan taakse
- Hohto sivuun, sanat rauhalliselle alueelle
- Yksi päävalo ja enintään yksi heikompi kaiku
- Tumma tai hillitty pohja, joka antaa valolle tilaa
- Hohto vain tärkeimpään kohteeseen

## Hohtavat taustat ja niiden koodit

Helpoimmassa hohtavassa taustassa säteittäinen liukuväri alkaa kirkkaana, laskee nopeasti syvemmän välisävyn kautta ja häipyy lähes mustaan pohjaan. Keskipisteen siirto sivuun saa sen tuntumaan valonlähteeltä maalitaulun sijaan.

- Hiilloksen hohto: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)`
- Altaan valo: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)`
- Lavahohto alhaalta: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)`
- Limenvihreä signaali: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)`
- Ikkunavalo paperilla: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)`
- Violetti lamppu: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)`

Viisi tummaa hohtoa ja yksi vaalea. Vaalea toimii, koska hohto on jo valmiiksi vaaleaa pohjaa lämpimämpi ja kirkkaampi, ei voimakkaampi.

Jokaisessa on kolme osaa: lähes valkoinen tai hyvin vaalea ydin, kylläinen välipysäkki ja saman väriperheen syvä pohja. Ilman välipysäkkiä hohto näyttää harmaalta kohdatessaan tumman, kuten [sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää. Muodosta kertoo lisää [säteittäinen liukuväri](https://gradiently.design/fi/guide/radial-gradient).

## Tee hohdosta aidon valon näköinen

1. **Aloita tummasta tai hillitystä pohjasta** Valo tarvitsee pimeyttä näkyäkseen. Sinimusta, syvä vihreä tai murrettu paperisävy toimii; kirkas valkoinen ei anna hohdolle tilaa.
2. **Anna ytimelle vaaleampi, lämpimämpi sävy** Aito valo on keskeltä kirkkaimmillaan ja vähiten kylläistä. Tee ytimestä hohdon vaalea versio, esimerkiksi `#fde68a` oranssille hohdolle.
3. **Anna valon hiipua hitaasti** Häivytyksen tulee kattaa laaja alue, usein puolet kuvasta. Lyhyt häivytys näyttää saksilla leikatulta valokeilalta.
4. **Päätä valon tulosuunta** Sijoita ydin reunan tai kulman lähelle tai valaistavan esineen taakse. Pidä muu sommitelma tämän suunnan mukaisena.
5. **Lisää hienoa rakeisuutta** Raidoittuminen näkyy selvimmin pitkissä tummissa häivytyksissä. Kevyt kohinakerros peittää sävyaskelia; menetelmä löytyy [rakeisista liukuväreistä](https://gradiently.design/fi/guide/grainy-gradients).

Kokeile vielä poistaa hohto ja katsoa uudelleen. Jos sommitelma toimii yhä, hohto lisää tunnelmaa. Jos kokonaisuus hajoaa, hohto tekee sommittelun tai kontrastin tehtävää.

## Hohtoefekti CSS:llä

Verkossa on kolme luotettavaa tapaa tehdä hohto. Nollasiirtymäinen, laajasti sumennettu `box-shadow` valaisee kortin tai painikkeen reunat. Pseudoelementin säteittäinen liukuväri tekee pehmeän valoläikän esineen taakse. Värillisen muodon `filter: blur()` tuottaa pehmeimmän tuloksen suuremmalla renderöintikustannuksella. [MDN:n box-shadow-ohje](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) luettelee kaikki arvot.

```css
/* 1. A button that glows at its edges */
.button-glow {
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(196 181 253 / 0.4),
    0 0 24px rgb(124 58 237 / 0.55),
    0 0 64px rgb(124 58 237 / 0.25);
}

/* 2. A pool of light behind a product image */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}

/* 3. A blurred orb in a hero background */
.orb {
  position: absolute;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0891b2;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}
```

Kolme hohtoa, ei yksikään tekstissä. Kahden tai kolmen heikkenevän laatikkovarjon kerrostus luo pehmeämmän reunan kuin yksi suuri varjo.

| Menetelmä | Sopii parhaiten | Kustannus | Huomioi |
| --- | --- | --- | --- |
| `box-shadow` | Painikkeet, kortit, syötekentät | Pieni | Yläelementin `overflow: hidden` leikkaa |
| `radial-gradient`-kerros | Valo kuvien ja osioiden takana | Pieni | Pitkien tummien häivytysten raidoittuminen |
| Muoto, jossa `filter: blur()` | Pääkuvataustat, tunnelmalliset pallot | Suurempi, etenkin animoituna | Uudelleenpiirto vieritettäessä; pidä paikallaan tai pienenä |

Valitse edullisin halutun ilmeen tuottava menetelmä. Useimpien sivun hohtojen tulisi olla liukuvärejä tai varjoja sumennettujen elementtien sijaan.

Pidä painikkeen hohto hienovaraisena ja teksti terävänä: valo kuuluu painikkeen muotoon, ei sanoihin. Täydet asetukset löytyvät [CSS-laatikkovarjosta](https://gradiently.design/fi/guide/css-box-shadow).

## Hohto julkaisuissa, julisteissa ja tarinoissa

Still-kuvassa hohto toimii parhaiten kohteen takana tai kuvan tyhjällä puoliskolla. Aseta valo kohtaan, johon katseen tulee osua ensin, ja otsikko pohjan tummempaan, rauhallisempaan osaan. Valo johdattaa lukijan sanoihin koskematta niihin.

Pystytarina tapahtumasta, kirkas taustaläikkä suoraan otsikon takana haalistaa tekstin

Valo kulkee suoraan otsikon läpi: kirkkain alue osuu kirjaimiin ja latistaa ne.

Sama pystytarina tapahtumasta, kirkas hohto siirrettynä otsikon vierelle ja tekstin takana rauhallinen tumma alue

Sama tarina, valo siirretty sanojen ulkopuolelle. Hohto luo yhä tunnelmaa ja teksti pysyy terävänä.

Juuri tämän Gradientlyn Mark tekee itsestään. Sen rauhallisin alue asettuu sanojen taakse, kirjainten lähellä värit syvenevät tai vaalenevat ja Automaattinen muste valitsee rivikohtaisesti vaalean tai tumman tekstin Markin paletista. Laatikoita, varjoja tai kehiä ei tarvitse lisätä. [Automaattinen muste](https://gradiently.design/fi/guide/auto-ink-legibility) näyttää ajatuksen käytännössä.

- Yön pohja: #09071a
- Indigon häivytys: #1e1b4b
- Violetti valo: #6d28d9
- Lila ydin: #c4b5fd
- Lämmin korostus: #fde68a
- Terävä teksti: #f8fafc

Hohtopaletti neljässä kerroksessa: pohja, häivytys, valo ja ydin sekä yksi lämmin korostus ja tekstiväri, joka ei omaksu hohtoa.

## Hohto, neon ja valovuodot vertailussa

Nämä kolme sekoittuvat helposti. Hohto on pehmeää, laajaa valoa yhdestä lähteestä. [Neonliukuvärit](https://gradiently.design/fi/guide/neon-gradients) ovat kylläisiä, sähköisiä värejä, joiden keskellä on ohut kirkas viiva, lähempänä valokylttiä. [Valovuodot](https://gradiently.design/fi/guide/light-leaks) ovat filmimäisiä lämpimiä juovia, jotka tulevat yleensä reunasta. Kaikki kolme tarvitsevat tumman pohjan ja pysyvät poissa tekstistä. Jos haluat valon ajelehtivan ja muuttuvan, revontuliliukuvärit ovat niiden liikkuva sukulainen.

## FAQ

### Miten teen hohtoefektin CSS:llä?

Käytä siirtymätöntä, laajasti sumennettua `box-shadow`-varjoa, kuten `0 0 24px` puoliläpinäkyvällä värillä, tai läpinäkyväksi häipyvää säteittäistä liukuväriä elementin takana. Pehmeimmän hohdon saat sumentamalla värillisen muodon `filter: blur()`-ominaisuudella.

### Kannattaako tekstin ympärille lisätä hohto?

Ei. Kehä pehmentää kirjainten reunat ja laskee kontrastia, jolloin sanoja on vaikeampi lukea. Pidä teksti terävänä ja sijoita hohto muodon taakse tai läheiseen taustaan.

### Millä taustalla hohto erottuu?

Tummalla tai hillityllä saman väriperheen pohjalla, kuten syvällä indigolla violetin valon takana. Kirkas valkoinen tausta ei anna hohdolle tilaa.

### Miksi hohtavassa liukuvärissäni on raitoja?

Pitkissä tummissa häivytyksissä on vähän sävyaskelia, joten näytöt paljastavat raidat. Lisää hieno rakeisuuskerros tai vie paremmalla laadulla piilottaaksesi ne.

### Miten hohto ja neon eroavat?

Hohto on laajaa, pehmeää valoa yhdestä lähteestä. Neon on kylläistä väriä, jonka keskellä on ohut, erittäin kirkas viiva valokyltin putken tapaan.