# Neongradienter: glöd utan trötta ögon

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

Neon är färg uppskruvad till max. Mot mörk botten glöder den, men över en hel skärm surrar den. Så behåller du glöden och slipper surret.

## The short version

- En neongradient använder mycket mättade färger, som skarp rosa, elektriskt blått, cyan och syrgrönt, oftast glödande mot en mörk botten.
- Neon ser bara ut som ljus när det omges av mörker; mot ljus botten ser samma färger högljudda och platta ut.
- Två mättade färger med liknande ljushet som möts kant mot kant verkar vibrera, vilket är den främsta orsaken till att neon tröttar ögonen.
- Håll neonet till en liten del av ytan och sätt texten i vitt eller nästan vitt i stället för neon, så blir det behagligt att titta på.
- Neongradienter passar musik, spel, nattliv och tekniklanseringar, där energin är hela poängen.

En **neongradient** är en övergång mellan mycket mättade färger, som skarp rosa, violett, elektriskt blått, cyan eller syrgrönt, oftast glödande mot en mörk botten, som ett tänt rör på en mörk gata. Det är den mest energiska sortens gradient som finns. Det är också den som lättast tröttar ögat, eftersom mättade färger sida vid sida kan skimra och vibrera. Lösningen är inte mindre färg utan mer mörker runt den.

## Vad som får en gradient att se ut som neon

Riktiga neonskyltar är tunna linjer av intensiv färg omgivna av en mjuk gloria och en mörk natt. För att se ut som neon på en skärm behöver en gradient samma tre saker: färg på eller nära full mättnad, en ljus kärna som klingar av till ett sken och en mörk botten som gör skenet synligt. Ta bort mörkret så har du ett skrikigt färgblock i stället för ljus.

- Skarpt rosa 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%)`
- Syrlime: `radial-gradient(circle at 70% 30%, #c6ff00 0%, #3f6b00 30%, #0a1200 70%)`
- Ultraviolett: `linear-gradient(135deg, #0b0418 0%, #5b12d6 55%, #d04bff 100%)`
- Elektriskt blått: `radial-gradient(circle at 30% 70%, #2f6bff 0%, #0b1f7a 35%, #02040f 75%)`
- Spelhallssolnedgång: `linear-gradient(180deg, #120526 0%, #ff2d95 60%, #ffb800 100%)`

Neon mot mörker: alla har en mättad kärna, ett avklingande sken och en nästan svart botten.

## Därför tröttar neon ögonen

När två starkt mättade färger med liknande ljushet möts i en hård kant, till exempel ren röd text på ren blå botten, verkar kanten skimra. Det kallas ofta kromatisk vibration, och det gör text tröttsam eller till och med svår att fokusera på. Rött och blått bredvid varandra kan dessutom se ut att ligga på olika djup. Neondesigner snubblar på båda eftersom varje färg har full styrka.

### Tröttar

- Neon som fyller hela bilden från kant till kant
- Neontext på neonbakgrund
- Två mättade motsatser, som rött och blått, som möts i en hård kant
- Snabbt flimmer eller stroboskopiska glöd-effekter

### Glöder

- Neon på en liten del av en mörk yta
- Vit eller nästan vit text med ett mjukt färgat sken
- Mättade färger skilda åt av mörker eller en mjuk övergång
- Långsamma, lugna pulser, eller inga alls

> **Inget snabbt blinkande** Animerat neon som blinkar oftare än tre gånger i sekunden kan utlösa anfall hos personer med ljuskänslig epilepsi, och WCAG sätter en gräns för det. Håll allt flimmer långsamt och diskret, och stäng av det för dem som föredrar minskad rörelse.

## Färgpaletter för neon

Neonpaletter fungerar bäst som en eller två glödande färger plus en mörk botten, inte fem neonfärger på en gång. Rosa och violett, eller cyan och blått, är grannar och glöder ihop utan att vibrera. Rosa och cyan är det klassiska synthwave-paret; blandat via violett förblir det klart i stället för att gå över i grått.

- Natt: #07020a
- Skarp rosa: #ff2d95
- Elektrisk violett: #7a3cff
- Lasercyan: #00e0ff
- Syrlime: #c6ff00
- Natriumgult: #ffb800

En neonuppsättning på en nästan svart natt. Välj en eller två av de glödande färgerna per design, inte alla fem.

- Rosa, violett, cyan: `linear-gradient(90deg, #ff2d95 0%, #7a3cff 50%, #00e0ff 100%)`
- Giftig mint till blått: `linear-gradient(135deg, #00ff94 0%, #00b3ff 100%)`
- Rosa till bärnsten: `linear-gradient(135deg, #ff2d95 0%, #ffb800 100%)`

Neonövergångar i full styrka. Använd dem som tunna accenter, linjer eller små former mot mörker, inte som hela bakgrunden.

## Så bygger du en neongradient

1. **Börja mörkt** Fyll bilden med ett nästan svart som lutar åt ditt neon, till exempel violettsvart under rosa.
2. **Placera en ljus kärna** Lägg neonet i full styrka på en liten yta, en linje, en ring eller ett hörn, inte mitt i bilden.
3. **Låt den klinga av** Tona kärnan via en djup version av samma nyans ut i mörkret, så att den läses som en gloria och inte som en fläck.
4. **Lägg till ett andra neon bara som granne** Violett bredvid rosa, eller blått bredvid cyan, glöder ihop. Motsatser behöver mörker emellan sig.
5. **Avsluta med korn** Mörka glorior får lätt band. Ett fint brusskikt håller dem mjuka; se [gradientband](https://gradiently.design/sv/guide/gradient-banding).

## Text på neon

Sätt orden i vitt eller en mycket blek ton av ditt neon, aldrig i ett andra neon. Ett mjukt sken i neonfärgen runt vita bokstäver läses som en skylt; mättade bokstäver på mättad botten läses som brus. Håll brödtext borta från det starkaste skenet och i det mörkaste området, och kontrollera kontrasten som mot vilken mörk bakgrund som helst; se [mörka gradientbakgrunder](https://gradiently.design/sv/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 ljus: blek text med staplade färgade sken och en mörk panel med en tunn cyankant. Färgen sitter i glorian, inte i bokstäverna.

En affisch för en klubbkväll där ett starkt neonsken ligger direkt bakom titeln

När det starkaste skenet ligger bakom titeln slåss neon och ord.

Samma affisch med mörker bakom titeln och skenet som ram runt den

Mörker bakom titeln, sken runt den: affischen läses direkt.

## Där neongradienter passar

| Fungerar bra | Använd med försiktighet |
| --- | --- |
| Musik, klubbkvällar och festivaler | Långläsning eller dokumentation |
| Spel, streaming och esport | Hälsa, finans och juridik |
| Tekniklanseringar och produktfilmer | Tryck, där neonfärger inte går att matcha |
| Cocktailbarer och nattmarknader | Barnprodukter och lugnt välmående |

Neon betyder energi och natt. Där människor behöver lugn eller förtroende fungerar det bättre som en enda accent.

Tryck kräver en särskild anmärkning. Neonfärger på skärm är starkare än vad vanliga CMYK-färger kan återge, så de blir matta i tryck. Fluorescerande specialfärger kan komma nära; fråga ditt tryckeri och läs [gradienter i tryck](https://gradiently.design/sv/guide/print-gradients) först. För en mjukare tolkning av glödande färg, se [norrskensgradienter](https://gradiently.design/sv/guide/aurora-gradients), och för den retro versionen, [vaporwave-färger](https://gradiently.design/sv/guide/vaporwave-colors).

Neon vaknar till liv i rörelse. En långsam puls mot mörk botten ger en stark bakgrund för en Story eller Reel, och i Gradiently exporteras designer gjorda med en säkrad Mark som sömlösa loopar på 5 till 30 sekunder, i det tempo du väljer.

## FAQ

### Vad är en neongradient?

En neongradient blandar mycket mättade färger som skarp rosa, elektriskt blått, cyan eller syrgrönt, oftast glödande mot en mörk botten.

### Varför gör neonfärger ont i ögonen?

Mättade färger med liknande ljushet i en hård kant verkar vibrera. Om du skiljer dem åt med mörker eller en mjuk övergång och använder vit text löser du det mesta.

### Vilken bakgrund passar till neonfärger?

Ett nästan svart med en svag ton, till exempel en mycket mörk violett eller marinblå. Neon ser bara ut som ljus när det omges av mörker.

### Vilken textfärg ska jag använda på en neongradient?

Vitt eller en mycket blek ton av neonet, placerad i det mörkaste området, gärna med ett mjukt sken i neonfärgen.

### Går neongradienter att trycka?

Inte exakt. Neonfärger på skärm är starkare än vanliga CMYK-färger, så de blir matta i tryck. Fluorescerande specialfärger kommer närmare.