# Neon-Farbverläufe: Leuchten, ohne die Augen zu ermüden

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

Neon ist Farbe auf voller Stufe. Auf dunklem Grund leuchtet sie; über einen ganzen Bildschirm verteilt, surrt sie. So behältst du das Leuchten und verlierst das Surren.

## The short version

- Ein Neon-Farbverlauf nutzt stark gesättigte Farben wie knalliges Pink, Elektroblau, Cyan und Giftgrün, die meist aus einem dunklen Grund leuchten.
- Neon wirkt nur dann wie Licht, wenn es von Dunkelheit umgeben ist; auf hellem Grund wirken dieselben Farben laut und flach.
- Zwei gesättigte Farben ähnlicher Helligkeit, die direkt aneinanderstoßen, scheinen zu flimmern, und das ist die Hauptursache für Augenbelastung bei Neon.
- Wenn Neon nur einen kleinen Teil der Fläche einnimmt und Text weiß oder fast weiß statt neon gesetzt ist, lässt es sich bequem ansehen.
- Neon-Farbverläufe passen zu Musik, Gaming, Nachtleben und Tech-Launches, wo Energie der Punkt ist.

Ein **Neon-Farbverlauf** ist eine Mischung aus sehr gesättigten Farben wie knalligem Pink, Violett, Elektroblau, Cyan oder Giftgrün, die meist aus einem dunklen Grund leuchten wie eine Leuchtröhre in einer dunklen Straße. Es ist die energiegeladenste Art von Verlauf. Es ist auch die, die das Auge am ehesten ermüdet, weil gesättigte Farben nebeneinander schimmern und flimmern können. Die Lösung ist nicht weniger Farbe, sondern mehr Dunkelheit drumherum.

## Was einen Farbverlauf nach Neon aussehen lässt

Echte Neonschilder sind dünne Linien intensiver Farbe, umgeben von einem weichen Lichthof und einer dunklen Nacht. Um auf einem Bildschirm nach Neon auszusehen, braucht ein Verlauf dieselben drei Dinge: Farbe bei oder nahe voller Sättigung, einen hellen Kern, der in ein Leuchten ausläuft, und einen dunklen Grund, der das Leuchten sichtbar macht. Nimm die Dunkelheit weg, und du hast einen lauten Farbblock statt Licht.

- Pinke Leuchtröhre: `radial-gradient(ellipse at 50% 50%, #ff4fd8 0%, #b0127a 25%, #1a0314 60%, #07020a 100%)`
- Laser-Cyan: `linear-gradient(180deg, #05060f 0%, #062a3a 55%, #00e5ff 100%)`
- Säurelimette: `radial-gradient(circle at 70% 30%, #c6ff00 0%, #3f6b00 30%, #0a1200 70%)`
- Ultraviolett: `linear-gradient(135deg, #0b0418 0%, #5b12d6 55%, #d04bff 100%)`
- Elektroblau: `radial-gradient(circle at 30% 70%, #2f6bff 0%, #0b1f7a 35%, #02040f 75%)`
- Arcade-Sonnenuntergang: `linear-gradient(180deg, #120526 0%, #ff2d95 60%, #ffb800 100%)`

Neon auf Dunkel: Jeder hat einen gesättigten Kern, ein auslaufendes Leuchten und einen fast schwarzen Grund.

## Warum Neon die Augen belastet

Wenn zwei stark gesättigte Farben ähnlicher Helligkeit an einer harten Kante aufeinandertreffen, etwa reiner roter Text auf reinem Blau, scheint die Kante zu schimmern. Man nennt das oft chromatisches Flimmern, und es macht Text anstrengend oder sogar schwer zu fokussieren. Rot und Blau nebeneinander können außerdem auf unterschiedlichen Tiefen zu liegen scheinen. Neon-Designs stolpern über beides, weil jede Farbe auf voller Stärke ist.

### Belastet

- Neon, das das ganze Bild von Rand zu Rand füllt
- Neon-Text auf Neon-Hintergrund
- Zwei gesättigte Gegenfarben wie Rot und Blau, die sich an einer harten Kante berühren
- Schnelles Flackern oder Stroboskop-Leuchteffekte

### Leuchtet

- Neon auf einem kleinen Teil einer dunklen Fläche
- Weißer oder fast weißer Text mit weichem farbigem Leuchten
- Gesättigte Farben, getrennt durch Dunkelheit oder einen weichen Übergang
- Langsames, sanftes Pulsieren oder gar keins

> **Kein schnelles Blinken** Animiertes Neon, das öfter als dreimal pro Sekunde aufblitzt, kann bei Menschen mit fotosensitiver Epilepsie Anfälle auslösen, und die WCAG setzen dafür eine Grenze. Halte jedes Flackern langsam und dezent und stopp es für Menschen, die reduzierte Bewegung bevorzugen.

## Neon-Farbpaletten

Neon-Paletten funktionieren am besten als eine oder zwei leuchtende Farben plus dunkler Grund, nicht als fünf Neontöne auf einmal. Pink und Violett oder Cyan und Blau sind Nachbarn und leuchten zusammen, ohne zu flimmern. Pink und Cyan ist das klassische Synthwave-Paar; über Violett gemischt, bleibt es leuchtend, statt grau zu werden.

- Nacht: #07020a
- Knallpink: #ff2d95
- Elektroviolett: #7a3cff
- Laser-Cyan: #00e0ff
- Säurelimette: #c6ff00
- Natriumbernstein: #ffb800

Ein Neon-Set auf fast schwarzer Nacht. Wähl pro Design eine oder zwei der leuchtenden Farben, nicht alle fünf.

- Pink, Violett, Cyan: `linear-gradient(90deg, #ff2d95 0%, #7a3cff 50%, #00e0ff 100%)`
- Giftminze zu Blau: `linear-gradient(135deg, #00ff94 0%, #00b3ff 100%)`
- Pink zu Bernstein: `linear-gradient(135deg, #ff2d95 0%, #ffb800 100%)`

Neon-Mischungen in voller Stärke. Nutze sie als dünne Akzente, Linien oder kleine Formen auf Dunkel, nicht als ganzen Hintergrund.

## So baust du einen Neon-Farbverlauf

1. **Dunkel starten** Füll das Bild mit einem fast Schwarz, das zu deinem Neon hin getönt ist, etwa Violettschwarz unter Pink.
2. **Einen hellen Kern setzen** Setz das Neon in voller Stärke auf eine kleine Fläche, eine Linie, einen Ring oder eine Ecke, nicht in die Bildmitte.
3. **Auslaufen lassen** Lass den Kern über eine tiefe Version desselben Farbtons ins Dunkel auslaufen, damit er als Lichthof wirkt statt als Fleck.
4. **Ein zweites Neon nur als Nachbarn** Violett neben Pink oder Blau neben Cyan leuchten zusammen. Gegenfarben brauchen Dunkelheit dazwischen.
5. **Mit Körnung abschließen** Dunkle Lichthöfe neigen zu Banding. Eine feine Rauschebene hält sie weich; siehe [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding).

## Text auf Neon

Setz Worte in Weiß oder einer sehr blassen Tönung deines Neons, nie in einem zweiten Neon. Ein weiches Leuchten in der Neonfarbe um weiße Buchstaben wirkt wie ein Schild; gesättigte Buchstaben auf gesättigtem Grund wirken wie Rauschen. Halte Fließtext vom hellsten Leuchten fern und im dunkelsten Bereich und prüfe den Kontrast wie auf jedem dunklen Hintergrund; siehe [dunkle Verlaufshintergründe](https://gradiently.design/de/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 als Licht: blasser Text mit gestapeltem farbigem Leuchten und ein dunkles Panel mit dünnem Cyan-Rand. Die Farbe steckt im Lichthof, nicht in den Buchstaben.

Ein Clubnacht-Poster, bei dem ein helles Neonleuchten direkt hinter dem Titel liegt

Liegt das hellste Leuchten hinter dem Titel, kämpfen Neon und Worte.

Dasselbe Poster mit Dunkelheit hinter dem Titel und dem Leuchten als Rahmen

Dunkelheit hinter dem Titel, Leuchten drumherum: Das Poster liest sich sofort.

## Wo Neon-Farbverläufe passen

| Funktioniert gut | Mit Vorsicht einsetzen |
| --- | --- |
| Musik, Clubnächte und Festivals | Lange Texte oder Dokumentation |
| Gaming, Streaming und E-Sport | Marken aus Gesundheit, Finanzen und Recht |
| Tech-Launches und Produktfilme | Druck, wo Neonfarben nicht erreichbar sind |
| Cocktailbars und Nachtmärkte | Kinderprodukte und ruhige Wellness |

Neon heißt Energie und Nacht. Wo Menschen Ruhe oder Vertrauen brauchen, funktioniert es besser als einzelner Akzent.

Druck braucht einen eigenen Hinweis. Bildschirm-Neon ist heller, als normale CMYK-Farben es wiedergeben können, deshalb wirkt es gedruckt stumpf. Fluoreszierende Sonderfarben kommen nahe heran; frag deine Druckerei und lies vorher [Farbverläufe drucken](https://gradiently.design/de/guide/print-gradients). Eine weichere Art leuchtender Farbe findest du unter [Aurora-Farbverläufe](https://gradiently.design/de/guide/aurora-gradients), die Retro-Version unter [Vaporwave-Farben](https://gradiently.design/de/guide/vaporwave-colors).

In Bewegung wird Neon lebendig. Ein langsames Pulsieren auf dunklem Grund ergibt einen starken Hintergrund für Storys oder Reels, und in Gradiently lassen sich Designs mit einem gesicherten Mark als nahtlose Loops von 5 bis 30 Sekunden im Tempo deiner Wahl exportieren.

## FAQ

### Was ist ein Neon-Farbverlauf?

Ein Neon-Farbverlauf mischt sehr gesättigte Farben wie knalliges Pink, Elektroblau, Cyan oder Giftgrün, die meist aus einem dunklen Grund leuchten.

### Warum tun Neonfarben in den Augen weh?

Gesättigte Farben ähnlicher Helligkeit an einer harten Kante scheinen zu flimmern. Trennst du sie durch Dunkelheit oder einen weichen Übergang und nutzt weißen Text, ist das meiste behoben.

### Welcher Hintergrund passt zu Neonfarben?

Ein fast Schwarz mit leichter Tönung, etwa ein sehr dunkles Violett oder Marineblau. Neon wirkt nur wie Licht, wenn es von Dunkelheit umgeben ist.

### Welche Textfarbe passt auf einen Neon-Farbverlauf?

Weiß oder eine sehr blasse Tönung des Neons, im dunkelsten Bereich platziert, auf Wunsch mit weichem Leuchten in der Neonfarbe.

### Kann man Neon-Farbverläufe drucken?

Nicht exakt. Bildschirm-Neon ist heller als normale CMYK-Farben, deshalb wird es gedruckt stumpfer. Fluoreszierende Sonderfarben kommen näher heran.