# Irisierender Verlauf: Perlmutt-Farbwechsel mit Codes

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

Irisieren ist der leise Cousin des Holografischen: eine Perle, eine Seifenblase, das Innere einer Muschel. Das sind die Farben, Codes und Regeln, die es wie eine Oberfläche wirken lassen statt wie einen Regenbogen.

## The short version

- Ein irisierender Verlauf mischt mehrere blasse, eng verwandte Töne, meist Flieder, Mint, Rosé, Himmelblau und Creme, sodass die Fläche beim Darüberblicken die Farbe zu wechseln scheint.
- Irisieren unterscheidet sich vom holografischen Design in der Stärke: Holografisch läuft den vollen Regenbogen mit hoher Sättigung, irisierend bleibt weich, blass und überwiegend neutral.
- Der Perlmutteffekt entsteht aus einer hellen Basis, niedriger Sättigung, einem weißen Glanzlicht und Tönen, die im Farbkreis nebeneinanderliegen.
- Dunkles Irisieren, wie ein Ölfilm oder ein Käferpanzer, nutzt dieselbe Idee auf fast schwarzem Grund mit tiefem Petrol, Violett und Bronze.
- Text auf einem irisierenden Hintergrund braucht dahinter eine ruhige, gleichmäßige Fläche, denn blasse wechselnde Töne geben heller Schrift schwachen und dunkler Schrift unruhigen Kontrast.

Ein **irisierender Verlauf** ist eine Mischung blasser, eng beieinanderliegender Töne, typischerweise Flieder, Mint, Rosa, Himmelblau und warmes Creme, über einer hellen Basis mit einem weichen weißen Glanzlicht. Der Effekt imitiert echte irisierende Dinge: Perlen, Seifenblasen, das Innere einer Abalone-Muschel. Die Farben sind sanft und wechseln allmählich über die Fläche, sodass sie als Schimmer statt als Farbstreifen wirkt. Die Codes unten kannst du direkt in CSS oder jedes Design-Tool einfügen, das Hex akzeptiert.

## Codes für irisierende Verläufe

Jeder davon beginnt bei fast Weiß oder fast Schwarz und fügt Töne hinzu, die nebeneinanderliegen. Kopiere einen unverändert oder tausche einen einzelnen Stopp, um ihn zu deinem zu machen.

- Perle: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Opal: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Seifenblase: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Abalone: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Ölfilm: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Käferpanzer: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Vier helle irisierende Mischungen und zwei dunkle. Alle sechs halten ihre Töne in ähnlicher Stärke, was verhindert, dass sie wie ein Regenbogen wirken.

Beachte, was die hellen gemeinsam haben: Kein Stopp ist voll gesättigt, und der hellste Punkt ist reines oder fast reines Weiß. Schiebst du einen Stopp zu einer kräftigen Farbe, wird aus der Perle ein [Pastellverlauf](https://gradiently.design/de/guide/pastel-gradients) oder, noch weiter, ein Regenbogen.

## Irisierend oder holografisch

Oft werden beide Wörter für dasselbe verwendet, doch im Design beschreiben sie unterschiedliche Looks. Holografisch imitiert Folienaufkleber und Kreditkarten-Hologramme: jeder Farbton, hohe Sättigung, harte Bänder. Irisierend imitiert natürliche Oberflächen, die leise die Farbe wechseln. Wenn du die lautere Version willst, behandelt [holografische Verläufe](https://gradiently.design/de/guide/holographic-gradients) sie ausführlich.

| Eigenschaft | Irisierend | Holografisch |
| --- | --- | --- |
| Sättigung | Niedrig, blasse Töne | Hoch, voller Regenbogen |
| Basis | Fast Weiß oder fast Schwarz | Oft Silber oder die Farben selbst |
| Übergänge | Lang und weich | Kurz, oft in Bändern |
| Vorbild aus der Realität | Perle, Muschel, Seifenblase, Öl auf Wasser | Folie, Aufkleber, Sicherheitshologramme |
| Stimmung | Ruhig, edel, Hautpflege, Braut | Verspielt, laut, Y2K, Musik |

Der schnellste Test: Kneif die Augen zusammen. Siehst du noch getrennte Farbtöne, ist es holografisch. Siehst du eine weiche blasse Fläche mit einem Hauch Farbe, ist es irisierend.

## So baust du einen irisierenden Verlauf von Grund auf

1. **Wähle die Basis** Helles Irisieren beginnt bei Weiß oder einem leicht warmen Off-White wie `#fbf9f6`. Dunkles Irisieren beginnt bei einem Blauschwarz wie `#0d0f1a`. Die Basis sollte ein Drittel der Fläche oder mehr abdecken.
2. **Wähle drei bis fünf benachbarte Töne** Geh in kleinen Schritten um den Farbkreis: Flieder zu Himmel zu Mint zu Creme zu Rosé. Halte sie in ähnlicher Helligkeit, damit keiner nach vorn springt.
3. **Senke die Sättigung** Wenn ein Ton wie eine Farbe aussieht, die du quer durch den Raum benennen könntest, ist er zu stark. Für helle Versionen strebe Töne an, die überwiegend weiß sind mit einer Spur Farbton.
4. **Füge ein Glanzlicht hinzu** Ein kleiner weißer radialer Fleck, zu einer Ecke versetzt, sagt dem Auge, woher das Licht kommt. Eins genügt, zwei beginnen wie ein glänzender Button zu wirken.
5. **Vollende mit feinem Korn** Blasse Mischungen zeigen auf Bildschirmen leicht Banding. Etwas Rauschen bricht die Stufen auf, was [Gradient Banding](https://gradiently.design/de/guide/gradient-banding) samt Lösung erklärt.

Der Schritt, der am meisten zählt, ist der dritte. Die meisten irisierenden Designs, die scheitern, sind schlicht zu bunt. Echte Perlen sind überwiegend weiß, die Farbe bemerkst du erst danach.

- Muschelweiß: #fbf9f6
- Fliederschimmer: #ece6f6
- Mintschimmer: #dff3f4
- Himmelschimmer: #e4ecf7
- Rosé-Schimmer: #fbe7f0
- Cremeschimmer: #fff6e0
- Graphittinte: #3d3a4a

Eine funktionierende irisierende Farbpalette: eine Basis, fünf Schimmer und eine dunkle Tinte für Schrift. Die Tinte gibt den blassen Farben etwas, wogegen sie stehen.

## Irisierendes CSS mit Farbwechsel beim Hover

Im Web kannst du den Schimmer wandern lassen, wenn jemand darauf zeigt, das Einzige, was eine gedruckte Perle kann und ein flaches Bild nicht. Wird der Winkel mit `@property` registriert, kann der Browser ihn weich animieren. Browser ohne Unterstützung zeigen einfach den Ruhezustand. Die [MDN-Seite zu @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) hat die Details.

```css
@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

@media (prefers-reduced-motion: reduce) {
  .pearl { transition: none; }
}
```

Eine Perlenkarte, deren Schimmer sich beim Überfahren dreht. Die weiße radiale Ebene ist das Glanzlicht, die lineare Ebene trägt die Töne.

Den Winkel zu drehen ist sanfter, als die Hintergrundposition zu verschieben, denn die Töne bleiben an ihrem Platz und nur ihre Richtung ändert sich, was näher daran ist, wie eine echte Fläche Licht einfängt. Für gleichmäßiger mischende Verläufe hilft es, Stopps in OKLCH zu definieren, siehe [OKLCH-Verläufe in CSS](https://gradiently.design/de/guide/css-gradient-oklch).

## Worte auf einen irisierenden Hintergrund setzen

Blasses Irisieren ist ein schwieriger Untergrund für Schrift. Weißer Text verschwindet darauf, und dunkler Text funktioniert nur, wenn die Fläche dahinter gleichmäßig ist. Nutze eine dunkle Tinte aus der Palette statt reinem Schwarz, halte die Worte über dem ruhigsten Teil der Mischung und lass den unruhigsten Wechsel in einer Ecke. Die allgemeinen Regeln stehen in [Text auf einem Verlaufshintergrund](https://gradiently.design/de/guide/text-on-gradient).

Ein blasser perlmuttartiger Produktlaunch-Post, in dem die Überschrift über den hellsten Teil des Schimmers läuft und schwach ist

Worte, die direkt über die wechselnden Töne gelegt werden, verlieren ihre Kanten dort, wo der Schimmer am hellsten ist.

Derselbe perlmuttartige Produktlaunch-Post mit einer gleichmäßigen Fläche hinter der Überschrift und dem Farbwechsel in einer Ecke

Mit dem ruhigsten Bereich hinter der Überschrift und dem zur Seite geschobenen Farbwechsel ist derselbe Post auf einen Blick lesbar.

Hier verdient sich ein Mark von Gradiently seinen Platz. Ein Mark weiß, wo die Worte stehen: Er verschiebt seinen ruhigsten Bereich dahinter, und Automatische Farbe wählt Zeile für Zeile helle oder dunkle Schrift aus der Palette des Mark, sodass eine weiche perlmuttartige Fläche in jeder Größe lesbar bleibt, ohne Kästen oder Schatten.

## Wo Irisieren am besten wirkt

- **Hautpflege und Beauty**: Launch-Posts, Farbkarten und Verpackungsaufkleber. Es erinnert an Tau und Licht auf der Haut, siehe [Design für Hautpflegemarken](https://gradiently.design/de/guide/skincare-brand-design).
- **Braut und Hochzeit**: Einladungen und Save-the-Dates auf Perlmutt, mit Graphittinte und großzügigen Rändern.
- **Schmuck**: ein Perlen- oder Opalgrund hinter Produktfotos greift die Steine auf, ohne mit ihnen zu konkurrieren.
- **Musik und Nachtleben**: die dunkle Ölfilm-Mischung auf einer Story im Format 1080×1920, mit einer Zeile weißer Schrift über dem dunkelsten Bereich.
- **Tech-Produktseiten**: ein Perlen-Header mit dem Hover-Schimmer von oben, hinter einer kurzen Überschrift gehalten.

Irisieren verbindet sich gut mit klarer Serife oder leichter Grotesk und weitem Abstand. Es beißt sich mit schweren Schlagschatten, dicken Konturen und gesättigten Akzenten. Wenn du Metall statt Perlmutt willst, ist der [Chrom-Effekt](https://gradiently.design/de/guide/chrome-effect) das härtere, kältere Geschwister.

## FAQ

### Welche Farben ergeben einen irisierenden Verlauf?

Blasser Flieder, Mint, Himmelblau, Rosa und Creme über weißer Basis, plus ein weiches weißes Glanzlicht. Für eine dunkle Version nutze tiefes Petrol, Violett und Bronze auf Blauschwarz.

### Was ist der Unterschied zwischen irisierend und holografisch?

Irisierend ist weich und blass, wie eine Perle oder Seifenblase. Holografisch läuft den vollen Regenbogen mit hoher Sättigung, wie Folienaufkleber.

### Wie mache ich einen irisierenden Effekt in CSS?

Lege ein weißes radiales Glanzlicht über einen linearen Verlauf blasser Nachbartöne. Damit er wechselt, registriere einen Winkel mit `@property` und ändere ihn beim Hover.

### Ist perlmuttartig dasselbe wie irisierend?

Perlmuttartig ist eine Art des Irisierens: überwiegend weiß mit schwachem Farbwechsel. Irisierend umfasst auch dunklere Wechsel wie Öl auf Wasser oder einen Käferpanzer.

### Welche Schriftfarbe funktioniert auf einem irisierenden Hintergrund?

Eine dunkle Tinte aus der Palette, etwa ein Graphit mit einem Hauch Violett, über dem ruhigsten Bereich platziert. Weiße Schrift ist auf blassem Irisieren selten lesbar.