# Neongradienter: glød uten slitne øyne

[Canonical HTML page](https://gradiently.design/nb/guide/neon-gradients)

Neon er farge skrudd helt opp. På en mørk bunn gløder den, og spredt over en hel skjerm summer den. Slik beholder du gløden og blir kvitt summingen.

## The short version

- En neongradient bruker svært mettede farger, som knallrosa, elektrisk blå, cyan og syregrønn, som vanligvis gløder ut av en mørk bunn.
- Neon ser bare ut som lys når det er omgitt av mørke. På en lys bunn virker de samme fargene høylytte og flate.
- To mettede farger med lignende lyshet plassert kant i kant ser ut til å vibrere, og det er hovedårsaken til at neon sliter på øynene.
- Å holde neon til en liten andel av flaten, og sette teksten i hvitt eller nesten hvitt i stedet for neon, gjør den behagelig å se på.
- Neongradienter passer til musikk, gaming, uteliv og teknologilanseringer, der energi er poenget.

En **neongradient** er en overgang mellom svært mettede farger, som knallrosa, fiolett, elektrisk blå, cyan eller syregrønn, som vanligvis gløder ut av en mørk bunn som et tent rør i en mørk gate. Det er den mest energiske typen gradient som finnes. Det er også den som lettest sliter ut øyet, fordi mettede farger side om side kan skimre og vibrere. Løsningen er ikke mindre farge, men mer mørke rundt den.

## Hva som får en gradient til å se ut som neon

Ekte neonskilt er tynne linjer av intens farge omgitt av en myk glorie og en mørk natt. For å se ut som neon på en skjerm trenger en gradient de samme tre tingene: farge på eller nær full metning, en lys kjerne som faller av til en glød, og en mørk bunn som gjør gløden synlig. Tar du bort mørket, har du en høylytt fargeblokk og ikke lys.

- Knallrosa rør: `radial-gradient(ellipse at 50% 50%, #ff4fd8 0%, #b0127a 25%, #1a0314 60%, #07020a 100%)`
- Lasercyan: `linear-gradient(180deg, #05060f 0%, #062a3a 55%, #00e5ff 100%)`
- Syrelime: `radial-gradient(circle at 70% 30%, #c6ff00 0%, #3f6b00 30%, #0a1200 70%)`
- Ultrafiolett: `linear-gradient(135deg, #0b0418 0%, #5b12d6 55%, #d04bff 100%)`
- Elektrisk blå: `radial-gradient(circle at 30% 70%, #2f6bff 0%, #0b1f7a 35%, #02040f 75%)`
- Arkadesolnedgang: `linear-gradient(180deg, #120526 0%, #ff2d95 60%, #ffb800 100%)`

Neon på mørkt: hver av dem har en mettet kjerne, en glød som faller av, og en nesten svart bunn.

## Hvorfor neon sliter på øynene

Når to sterkt mettede farger med lignende lyshet møtes i en hard kant, som ren rød tekst på ren blå, ser kanten ut til å skimre. Dette kalles ofte kromatisk vibrasjon, og det gjør tekst slitsom eller til og med vanskelig å fokusere på. Rødt og blått ved siden av hverandre kan også se ut til å ligge i ulik dybde. Neondesign snubler i begge deler fordi hver farge står i full styrke.

### Sliter

- Neon som fyller hele rammen fra kant til kant
- Neontekst på en neonbakgrunn
- To mettede motsetninger, som rødt og blått, som møtes i en hard kant
- Rask flimring eller stroboskopiske glødeeffekter

### Gløder

- Neon på en liten andel av en mørk flate
- Hvit eller nesten hvit tekst med en myk, farget glød
- Mettede farger skilt av mørke eller en myk overgang
- Langsomme, varsomme pulser, eller ingen i det hele tatt

> **Ingen rask blinking** Animert neon som blinker mer enn tre ganger i sekundet, kan utløse anfall hos personer med fotosensitiv epilepsi, og WCAG setter en grense for det. Hold all flimring langsom og diskret, og stopp den for folk som foretrekker redusert bevegelse.

## Fargepaletter i neon

Neonpaletter fungerer best som én eller to glødende farger pluss en mørk bunn, ikke fem neonfarger på en gang. Rosa og fiolett, eller cyan og blått, er naboer og gløder sammen uten å vibrere. Rosa og cyan er det klassiske synthwave-paret. Blandet gjennom fiolett holder det seg klart i stedet for å bli grått.

- Natt: #07020a
- Knallrosa: #ff2d95
- Elektrisk fiolett: #7a3cff
- Lasercyan: #00e0ff
- Syrelime: #c6ff00
- Natriumrav: #ffb800

Et neonsett på en nesten svart natt. Velg én eller to av de glødende fargene per design, ikke alle fem.

- Rosa, fiolett, cyan: `linear-gradient(90deg, #ff2d95 0%, #7a3cff 50%, #00e0ff 100%)`
- Giftig mint til blå: `linear-gradient(135deg, #00ff94 0%, #00b3ff 100%)`
- Rosa til rav: `linear-gradient(135deg, #ff2d95 0%, #ffb800 100%)`

Neonoverganger i full styrke. Bruk dem som tynne aksenter, linjer eller små former på mørkt, ikke som hele bakgrunnen.

## Slik bygger du en neongradient

1. **Start mørkt** Fyll rammen med en nesten svart som er tonet mot neonfargen din, som fiolettsvart under rosa.
2. **Plasser én lys kjerne** Legg neonfargen i full styrke i et lite område, en linje, en ring eller et hjørne, ikke midt i rammen.
3. **La den falle av** Ton kjernen ut gjennom en dyp versjon av samme fargetone og inn i mørket, så den leses som en glorie og ikke som en flekk.
4. **Legg bare til en neonfarge nummer to som nabo** Fiolett ved siden av rosa, eller blått ved siden av cyan, gløder sammen. Motsetninger trenger mørke mellom seg.
5. **Avslutt med korn** Mørke glorier får lett fargebånd. Et fint støylag holder dem jevne. Se [fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding).

## Tekst på neon

Sett ordene i hvitt eller i en svært blek tone av neonfargen din, aldri i en annen neonfarge. En myk glød i neonfargen rundt hvite bokstaver leses som et skilt, mens mettede bokstaver på en mettet bunn leses som støy. Hold brødteksten unna den sterkeste gløden og i det mørkeste området, og sjekk kontrasten slik du ville gjort på enhver mørk bakgrunn. Se [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds).

```css
.neon-title {
  color: #fff0fa; /* pale pink, not neon */
  text-shadow:
    0 0 4px #ff2d95,
    0 0 16px #ff2d95,
    0 0 40px rgb(255 45 149 / 0.6);
}

.neon-panel {
  background: #07020a;
  box-shadow:
    0 0 0 1px rgb(0 224 255 / 0.6),
    0 0 24px rgb(0 224 255 / 0.35);
  border-radius: 16px;
}
```

Neon som lys: blek tekst med flere lag farget glød, og et mørkt panel med en tynn cyan kant. Fargen ligger i glorien, ikke i bokstavene.

En plakat for en klubbkveld der en sterk neonglød ligger rett bak tittelen

Når den sterkeste gløden går bak tittelen, kjemper neon og ord mot hverandre.

Den samme plakaten med mørke bak tittelen og gløden som en ramme rundt

Mørke bak tittelen, glød rundt den: plakaten leses umiddelbart.

## Hvor neongradienter passer

| Fungerer godt | Bruk med omhu |
| --- | --- |
| Musikk, klubbkvelder og festivaler | Lang lesing eller dokumentasjon |
| Gaming, strømming og e-sport | Merkevarer innen helse, finans og juss |
| Teknologilanseringer og produktfilmer | Trykk, der neonfarger ikke kan gjengis |
| Cocktailbarer og kveldsmarkeder | Barneprodukter og rolig velvære |

Neon betyr energi og natt. Der folk trenger ro eller tillit, fungerer det bedre som én enkelt aksent.

Trykk krever en egen merknad. Neonfarger på skjerm er lysere enn det vanlige CMYK-farger kan gjengi, så de blir matte på trykk. Fluorescerende spotfarger kan komme nær. Spør trykkeriet ditt, og les [gradienter på trykk](https://gradiently.design/nb/guide/print-gradients) først. For en mykere variant av glødende farge, se [nordlysgradienter](https://gradiently.design/nb/guide/aurora-gradients), og for retroversjonen, [vaporwave-farger](https://gradiently.design/nb/guide/vaporwave-colors).

Neon våkner til liv i bevegelse. En langsom puls på en mørk bunn gir en sterk bakgrunn til en Story eller Reel, og i Gradiently eksporteres design laget med en Mark du har sikret deg, som sømløse looper på 5 til 30 sekunder i det tempoet du velger.

## FAQ

### Hva er en neongradient?

En neongradient blander svært mettede farger som knallrosa, elektrisk blå, cyan eller syregrønn, som vanligvis gløder ut av en mørk bunn.

### Hvorfor gjør neonfarger vondt i øynene?

Mettede farger med lignende lyshet i en hard kant ser ut til å vibrere. Å skille dem med mørke eller en myk overgang og bruke hvit tekst løser det meste.

### Hvilken bakgrunn passer til neonfarger?

En nesten svart med et svakt fargeskjær, som en svært mørk fiolett eller marineblå. Neon ser bare ut som lys når det er omgitt av mørke.

### Hvilken tekstfarge bør jeg bruke på en neongradient?

Hvit eller en svært blek tone av neonfargen, plassert i det mørkeste området, eventuelt med en myk glød i neonfargen.

### Kan neongradienter trykkes?

Ikke nøyaktig. Neonfarger på skjerm er lysere enn vanlige CMYK-farger, så de blir mattere på trykk. Fluorescerende spotfarger kommer nærmere.