# Moody Verläufe: dunkle, satte Farbcodes mit Atmosphäre

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

Dunkel ist einfach. Atmosphäre ist schwerer: Sie entsteht dadurch, wohin das Licht fällt, wie viel Farbe du zurückhältst und woraus die Schatten bestehen. Zwölf Codes und die Überlegungen dahinter.

## The short version

- Ein Moody Verlauf ist eine dunkle Mischung, bei der der größte Teil des Bildes im Schatten liegt und Farbe nur dort erscheint, wo Licht hinfällt.
- Moody Verläufe nutzen gedämpfte, leicht vergraute Farben statt gesättigter, deshalb wirken sie filmisch statt laut.
- Schatten mit einem Hauch Farbe, etwa Blauschwarz oder Pflaumenschwarz, wirken satter als reines Schwarz.
- Ein warmes Licht vor einem kühlen Grund ist der schnellste Weg, einem dunklen Verlauf Atmosphäre zu geben.
- Dunkle Verläufe neigen stärker zu Banding als helle, also füg etwas Körnung hinzu und exportiere als PNG oder als Video in hoher Qualität.

Ein **Moody Verlauf** ist eine dunkle Mischung, die sich wie ein schwach beleuchteter Raum verhält: Der größte Teil des Bildes liegt im Schatten, ein Bereich fängt das Licht, und die Farben werden zurückgehalten statt hochgedreht. Das Rezept lässt sich einfach beschreiben. Beginn mit einem getönten Fast Schwarz, füg ein oder zwei gedämpfte Mitteltöne hinzu und lass ein einzelnes Licht, oft warm vor einem kühlen Grund, die Fläche zum Leben erwecken. Unten findest du zwölf Codes zum Kopieren, dann wie du eigene baust und Worte darauf lesbar hältst.

## Was einen Verlauf moody macht und nicht nur dunkel

Viele dunkle Verläufe wirken flach. Marineblau, das in Schwarz ausläuft, ist dunkel, hat aber kein Wetter. Stimmung entsteht aus ein paar Entscheidungen, die Fotografen und Coloristen beim Film instinktiv treffen, und du kannst sie bewusst treffen.

- **Low Key.** Etwa drei Viertel des Bildes sind Schatten. Licht ist die Ausnahme, nicht die Regel.
- **Eine Lichtquelle.** Licht fällt aus einer Ecke oder von einer Kante ein, sodass das Auge weiß, wo Fenster oder Lampe sind.
- **Zurückgehaltene Farbe.** Mitteltöne sind leicht vergraut. Ein staubiges Petrol wirkt stimmungsvoller als ein leuchtendes.
- **Farbige Schatten.** Der dunkelste Punkt ist Blauschwarz, Grünschwarz oder Ochsenblut, nie `#000000`.
- **Temperaturkontrast.** Ein kleines warmes Licht in einer kühlen Szene, oder umgekehrt, erzeugt Spannung.

### Dunkel, aber flach

- Reines Schwarz an einem Ende
- Heller, gesättigter Akzent
- Licht gleichmäßig über das Bild verteilt
- Gerade Diagonale, von Ecke zu Ecke
- Perfekt glatte digitale Fläche

### Moody

- Getönter Schatten, der noch einen Farbton hat
- Gedämpfter, leicht vergrauter Akzent
- Licht an einer Stelle gebündelt
- Radialer oder weich gewinkelter Verlauf
- Feine Körnung, wie bei Film

## Zwölf Moody Verlauf Codes

Jeder davon ist ein einzelner CSS Wert, den du in `background` einfügen kannst. Sie sind grob nach Temperatur gruppiert: zuerst kühl und stürmisch, dann die warmen, lampenbeleuchteten, dann ein paar dazwischen.

- Sturm: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Mitternachtspetrol: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Tiefsee: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Wald in der Dämmerung: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Ochsenblut: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Letzte Glut: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- Kerzenschein: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Straßenlaterne: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Dunkle Pflaume: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Tinte und Violett: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Moos und Bronze: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Graphitrosé: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Zwölf Moody Verläufe. Keiner endet in reinem Schwarz, und keiner nutzt eine voll gesättigte Farbe.

Wenn du eher eine klare als eine stürmische Nacht willst, gehen [Nachthimmel Verläufe](https://gradiently.design/de/guide/night-sky-gradient) mehr ins Blaue und fügen Sterne hinzu. Für tiefere, glänzendere Farbe mit mehr Sättigung liegen [Edelsteinfarben](https://gradiently.design/de/guide/jewel-tone-colors) eine Stufe heller als alles hier.

## Eine Moody Farbpalette als Ausgangspunkt

Wenn du eigene Verläufe baust, arbeite mit einer Palette statt mit zwei Farben. Fünf reichen: ein Grund, zwei Schattenstufen, ein gedämpfter Mittelton und ein Licht. Das Licht ist die einzige Farbe, die wirklich hell sein darf, und es sollte nur auf einer kleinen Fläche erscheinen.

- Nachtgrund: #0d1117
- Tiefer Schiefer: #1b2330
- Sturm: #2c3a4a
- Regengrau: #5b6b78
- Lampenbernstein: #c98a3a

Eine kühle, regnerische Palette mit einem warmen Licht. Tausch den Bernstein gegen ein staubiges Rosé oder ein blasses Natriumgelb, und die Geschichte ändert sich komplett.

Warum warmes Licht vor kühlem Schatten so gut funktioniert, erklärt [Farbtemperatur](https://gradiently.design/de/guide/color-temperature). Weitere fertige Sets findest du bei [dunklen Farbpaletten](https://gradiently.design/de/guide/dark-color-palettes).

## So machst du einen Moody Verlauf in CSS

1. **Einen getönten Grund setzen** Wähl ein Fast Schwarz mit Farbton, etwa `#0b0d12` für Blauschwarz oder `#120806` für warmes Braunschwarz. Nutze es auch als Fallback für `background-color`.
2. **Den Schattenkörper anlegen** Leg einen sanften linearen Verlauf zwischen zwei dunkle Stufen desselben Farbtons. Das gibt dem Bild Tiefe, bevor irgendein Licht dazukommt.
3. **Ein Licht platzieren** Füg in einer Ecke einen radialen Verlauf hinzu, der bei etwa 40 Prozent zu `transparent` ausläuft. Halte seine Farbe gedämpft und seine Deckkraft deutlich unter voll.
4. **Ein kühles Gegenlicht hinzufügen** Optional ein zweiter, größerer und schwächerer Radialverlauf in der gegenüberliegenden Ecke, aus der kühlen Familie. Er verhindert, dass die Schattenseite tot wirkt.
5. **Mit Körnung abschließen** Eine feine Rauschebene mit geringer Deckkraft versteckt Banding und lässt die Fläche wie Film wirken. [Verläufe mit Körnung](https://gradiently.design/de/guide/grainy-gradients) hat den Code.

```css
.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}
```

Ein Laternenschein oben rechts, ein kühler Petrol Dunst unten links und ein Körper in Schiefer. Drei Ebenen, keine Bilder.

> **Dunkle Mischungen bekommen Banding** Mit so wenig Spielraum zwischen dem dunkelsten und dem hellsten Wert zeigen Moody Verläufe auf vielen Bildschirmen und nach der Kompression stufige Streifen. Körnung, PNG Exporte und der Verzicht auf stark komprimierte JPEGs helfen. [Banding bei Verläufen](https://gradiently.design/de/guide/gradient-banding) erklärt die Lösung im Detail.

## Worte auf einen Moody Hintergrund setzen

Helle Schrift auf dunklem Grund liest sich gut, bis sie den einen hellen Lichtfleck kreuzt, an dem du so lange gearbeitet hast. Plane die Headline auf der Schattenseite und halte das Licht von den Worten fern, statt es dahinter zu legen. Ein weiches gebrochenes Weiß wie `#ece6dc` sitzt angenehmer auf einem Moody Grund als reines Weiß, das hart wirken kann.

Eine dunkle Event Story im Hochformat, bei der der helle Bereich des Hintergrunds hinter der Headline Die späte Show liegt

Der Hintergrund läuft einfach durch die Worte hindurch, also kann der hellste Bereich hinter der Headline landen.

Dieselbe dunkle Event Story mit ruhigem Schatten hinter der Headline und dem Leuchten an einem Rand

Hier verschiebt der Mark seinen ruhigsten, dunkelsten Bereich hinter den Text, und das Licht bleibt am Rand.

Die rechte Version ist das, was ein Mark von Gradiently von selbst macht: Er weiß, wo die Worte stehen, vertieft die Farbe nahe den Buchstaben und wählt Zeile für Zeile helle oder dunkle Schrift aus seiner eigenen Palette, ohne zusätzliche Kästen oder Schatten. [Text auf einem Verlauf](https://gradiently.design/de/guide/text-on-gradient) behandelt die Variante von Hand.

## Wo Moody Verläufe am besten wirken

| Einsatz | Probier | Größe |
| --- | --- | --- |
| Story für ein spätes Event oder eine Clubnacht | Tinte und Violett, Straßenlaterne | 1080×1920 |
| Podcast Cover | Ochsenblut, Graphitrosé | 3000×3000 |
| Speisekarten Plakat für Restaurant oder Bar | Kerzenschein, Moos und Bronze | A4, 2480×3508 |
| Website Hero für ein Studio oder eine Agentur | Sturm, Mitternachtspetrol | 1920×1080 |
| YouTube Thumbnail für Thriller oder Videoessay | Letzte Glut, Tiefsee | 1280×720 |
| Spotify Playlist Cover | Wald in der Dämmerung, Dunkle Pflaume | 1080×1080 |

Moody Verläufe passen zu allem, was nachts passiert, zu allem, was durchdacht wirken soll, und zu allem, dem man zuhören soll, statt dass es schreit.

Sie passen zu Nacht, Musik, Drinks, Film, Duft und Quiet Luxury. Zu einem Kindergeburtstag oder einem Sommerschlussverkauf passen sie weit weniger. Für eine ganze Oberfläche in diesem Register behandelt [dunkle Verlaufshintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds) die zusätzliche Sorgfalt, die Bildschirme brauchen.

Wenn du Ebenen lieber nicht von Hand abstimmen willst: Im Markt gibt es lebendige Marks genau in diesem Register, auffindbar mit Begriffen wie „tiefes Petrol“ oder „Ochsenblut“. Mit jedem nicht gesicherten Mark kannst du kostenlos gestalten, und wenn du dir einen sicherst, trägt kein anderes Plakat dieselbe Atmosphäre.

## FAQ

### Welche Farben ergeben einen Moody Verlauf?

Getönte Fast Schwarztöne wie Blauschwarz oder Pflaumenschwarz, ein oder zwei gedämpfte Mitteltöne wie staubiges Petrol oder Schiefer und ein einzelnes wärmeres Licht wie Bernstein oder Glut.

### Was unterscheidet einen Moody Verlauf von einem dunklen Verlauf?

Ein dunkler Verlauf muss nur dunkel sein. Ein Moody Verlauf hat eine klare Lichtquelle, zurückgehaltene Farbe und farbige Schatten, und das gibt ihm Atmosphäre.

### Sollte ein Moody Verlauf reines Schwarz nutzen?

Meist nicht. Ein Fast Schwarz mit einem Hauch Farbton, wie `#0b0d12`, wirkt satter und geht weicher in die umliegenden Farben über.

### Warum sieht mein dunkler Verlauf streifig aus?

Das ist Banding, das sich vor allem in dunklen, subtilen Mischungen zeigt. Füg feine Körnung hinzu und exportiere als PNG oder als Video in hoher Qualität statt als komprimiertes JPEG.

### Welche Textfarbe funktioniert auf einem Moody Verlauf?

Ein weiches gebrochenes Weiß liest sich meist am besten. Setz es auf die Schattenseite, weg vom hellsten Bereich, und prüf den Kontrast dort, wo jede Zeile steht.