# Figma-Farbverläufe: Tipps für glattere Ergebnisse

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

Figma macht einen Farbverlauf in zwei Klicks und einen guten in zwanzig. Hier ist der schnelle Weg durch den Verlaufseditor, dazu die Lösungen für graue Mitten, Banding und CSS, das nicht passt.

## The short version

- Figma bietet vier Farbverlauf-Füllarten: Linear, Radial, Angular und Diamond, alle im Menü der Füllart im Farbwähler wählbar.
- Richtung und Länge des Farbverlaufs stellst du mit Griffen auf der Arbeitsfläche ein, und neue Farbstopps fügst du hinzu, indem du im Farbwähler auf die Verlaufsleiste klickst.
- Lange Figma-Farbverläufe zwischen weit entfernten Farbtönen können in der Mitte grau werden, füge deshalb einen mittleren Stopp in einer leuchtenderen Zwischenfarbe hinzu.
- Lineare, radiale und Angular-Verläufe haben direkte CSS-Entsprechungen, Diamond-Verläufe nicht und werden am besten als Bilder exportiert.
- Ein Mesh-artiger Farbverlauf in Figma entsteht meist durch das Weichzeichnen einer Gruppe farbiger Ellipsen, und Körnung verbirgt Banding im Export.

Um einen **Figma-Farbverlauf** zu machen, wähle eine Ebene, klicke auf ihr Füllungsfeld und ändere die Füllart von Solid zu Linear, Radial, Angular oder Diamond. Auf der Arbeitsfläche erscheinen Griffe: Ziehe sie, um Richtung und Reichweite des Übergangs zu setzen, und klicke im Farbwähler auf die Verlaufsleiste, um Farbstopps hinzuzufügen. Das dauert Sekunden. Ihn glatt, satt und im Code identisch aussehen zu lassen, braucht ein paar Gewohnheiten mehr, und darum geht es hier.

## Die vier Farbverlaufsarten in Figma

- Linear: `linear-gradient(135deg, #0f172a, #4338ca 55%, #a5b4fc)`
- Radial: `radial-gradient(ellipse at 50% 50%, #fde68a, #f97316 45%, #7c2d12)`
- Angular: `conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9)`

Lineare, radiale und Angular-Füllungen, hier mit ihren CSS-Entsprechungen gezeichnet. Diamond hat kein CSS-Gegenstück.

| Figma-Füllung | Was sie zeichnet | CSS-Entsprechung |
| --- | --- | --- |
| Linear | Einen Übergang entlang einer geraden Linie | `linear-gradient()` |
| Radial | Einen Übergang von einem Mittelpunkt nach außen, als Ellipse | `radial-gradient()` |
| Angular | Einen Farbdurchlauf um einen Mittelpunkt | `conic-gradient()` |
| Diamond | Einen Übergang nach außen in einer vierzackigen Raute | Keine, als Bild exportieren |

Die Farbverlaufsarten von Figma und wie sie sich ins Web übersetzen.

Linear passt zu den meisten Hintergründen und Buttons. Radial passt zu Glows und Spotlights. Angular zeichnet Farbräder, Skalen und metallischen Glanz. Diamond wird selten gebraucht, er gibt ein facettiertes, vierseitiges Leuchten, das in Illustrationen markant wirkt, im Web aber zur Bitmap werden muss. Wie sich jede Art im Design allgemein verhält, siehe [die Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients).

## Den Verlaufseditor bedienen

1. **Die Richtung mit den Griffen setzen** Ein Griff markiert, wo die erste Farbe sitzt, der andere, wo die letzte liegt. Ziehe den Endgriff über den Rand des Frames hinaus für einen sanfteren Übergang oder nach innen für einen kürzeren, steileren.
2. **Stopps auf der Leiste hinzufügen** Klicke irgendwo auf die Verlaufsleiste im Farbwähler, um einen Stopp hinzuzufügen, und gib ihm dann eine Farbe. Wähle einen Stopp aus und drücke Entf, um ihn zu entfernen.
3. **Stopp-Deckkraft für Ausblendungen nutzen** Jeder Stopp hat seine eigene Deckkraft. Eine Farbe auf 0 % Deckkraft auszublenden lässt einen Farbverlauf ein Foto oder eine andere Füllung überlagern.
4. **Füllungen stapeln** Eine Ebene kann mehrere Füllungen enthalten. Füge über der ersten einen zweiten Farbverlauf mit transparenten Bereichen hinzu, um einen Glow über einen Grundübergang zu legen.
5. **Als Stil speichern** Speichere die fertige Füllung als Farbstil, damit das ganze Team denselben Farbverlauf nutzt. Figma-Variablen halten keine Farbverläufe, Stile schon.

> **Radiale Griffe** Radiale und Diamond-Füllungen haben einen dritten Griff, der die Breite der Ellipse unabhängig von ihrer Höhe setzt. Ihn zu strecken ist der Weg zu einem breiten Horizont-Glow statt eines runden Spotlights.

## Graue Mitten und trübe Übergänge beheben

Figma mischt Farbstopps direkt, ähnlich wie CSS standardmäßig, und hat keine Option, in einem wahrnehmungsbasierten Farbraum zu mischen. Ein langer Übergang zwischen weit entfernten Farbtönen, etwa von Blau zu Orange oder Blau zu Gelb, sackt in der Mitte ins Graue ab. Die Lösung ist ein mittlerer Stopp: Wähle die Farbe, die der Mittelpunkt haben soll, meist ein leuchtenderer Zwischenton, und füge sie von Hand hinzu. [Trübe Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) erklärt die Farbtheorie.

- Zwei Stopps: graue Mitte: `linear-gradient(90deg, #2563eb, #f97316)`
- Mittleren Stopp ergänzt: lebendig: `linear-gradient(90deg, #2563eb, #db2777 50%, #f97316)`

Blau zu Orange, vor und nach einem zusätzlichen Stopp. Der mittlere Stopp führt den Übergang über Pink statt über Grau.

## Mesh-artige Farbverläufe in Figma

Figma hat kein Mesh-Gradient-Werkzeug, aber eine überzeugende Version ist schnell gebaut. Zeichne vier oder fünf Ellipsen in deinen Farben, überlappend, in einem Frame mit dunklem oder hellem Hintergrund. Gruppiere sie, füge der Gruppe eine große Ebenenunschärfe (Layer blur) hinzu und beschneide den Inhalt des Frames. Verschiebe die Ellipsen, um die Farbe neu auszubalancieren. Das ist dieselbe Idee wie die Schichttechnik in [CSS-Mesh-Farbverläufen](https://gradiently.design/de/guide/css-mesh-gradient), und [Mesh-Farbverläufe](https://gradiently.design/de/guide/mesh-gradients) behandelt die gestalterische Seite.

### Vermeide

- Gleich große Ellipsen in gleichmäßigem Abstand
- Gegensätzliche Farbtöne, die sich in der Mitte überlappen
- Kleine Unschärfewerte, die harte Ellipsenkanten lassen
- Ein großes, dunkles, weichgezeichnetes Mesh ohne Körnung exportieren

### Besser

- Ein dominanter Fleck, zwei oder drei kleinere
- Benachbarte Farbtöne überlappen, Kontraste getrennt halten
- Eine Unschärfe, die groß genug ist, dass keine Kanten bleiben
- Vor dem Export eine schwache Rauschschicht obenauf

## Körnung hinzufügen, um Banding zu verbergen

Sanfte Farbverläufe, als 8-Bit-PNG oder -JPEG exportiert, können sichtbare Stufen zeigen, besonders in dunklen, langsamen Übergängen. Eine leichte Rauschschicht bricht diese Stufen auf. Neuere Figma-Versionen enthalten Rausch- und Texturoptionen im Effekte-Panel, ansonsten lege ein kachelbares Rauschbild mit einem Mischmodus wie Overlay oder Soft light bei niedriger Deckkraft über den Farbverlauf. [Banding im Farbverlauf](https://gradiently.design/de/guide/gradient-banding) erklärt, warum das funktioniert, und [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients), warum es auch besser aussieht.

## Figma-Farbverläufe exportieren und in CSS abgleichen

Im Dev Mode oder im Inspect-Panel zeigt Figma CSS für Farbverlaufsfüllungen. Sieh es als Ausgangspunkt und prüfe drei Dinge. Erstens den Winkel: Die Griffe, die du auf einem nicht quadratischen Frame gezogen hast, ergeben womöglich einen Winkel, den du nicht gewählt hättest, runde ihn also auf einen glatten Wert. Zweitens das Farbprofil: Nutzt deine Datei Display P3, können dieselben Hex-Werte in einem sRGB-Browser anders aussehen. Drittens gestapelte Füllungen: Sie werden zu kommagetrennten Farbverläufen, wobei die oberste Figma-Füllung zuerst steht.

```css
/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}
```

Typische Übersetzungen. Behalte eine flache Fallback-Farbe aus dem dunkelsten Stopp des Farbverlaufs.

Exportiere Bilder in 2x für scharfe Ergebnisse auf Bildschirmen mit hoher Pixeldichte und bevorzuge PNG für Farbverläufe mit Transparenz. Für Farbverläufe, die Vektor bleiben müssen, schreibt der SVG-Export lineare und radiale Füllungen als SVG-Verläufe, siehe [SVG-Farbverläufe](https://gradiently.design/de/guide/svg-gradients), um zu verstehen, was du bekommst. Diamond-Füllungen, weichgezeichnete Meshes und Rauschen kommen immer als Pixel heraus.

Baust du viele Farbverlauf-Hintergründe für Social Posts, Präsentationen und Banner, spart ein Tool, das dasselbe Material in jeder Größe rendert, das erneute Exportieren. In Gradiently wird ein Mark in jedem Format live gerendert, statt aus einem Export zugeschnitten zu werden.

## FAQ

### Wie mache ich einen Farbverlauf in Figma?

Wähle eine Ebene, klicke auf ihr Füllungsfeld und ändere Solid zu Linear, Radial, Angular oder Diamond. Ziehe die Griffe auf der Arbeitsfläche und klicke auf die Verlaufsleiste, um Stopps hinzuzufügen.

### Wie füge ich einem Figma-Farbverlauf einen Farbstopp hinzu?

Klicke irgendwo auf die Verlaufsleiste im Farbwähler. Wähle einen Stopp aus und drücke Entf, um ihn zu entfernen.

### Kann Figma Mesh-Farbverläufe machen?

Nicht nativ. Überlappe mehrere farbige Ellipsen, gruppiere sie und wende eine große Ebenenunschärfe an, oder nutze ein Plugin.

### Warum sieht mein Figma-Farbverlauf im Browser anders aus?

Prüfe den Winkel, den Figma exportiert hat, ob die Datei ein Display-P3-Farbprofil nutzt und ob gestapelte Füllungen in der richtigen Reihenfolge übersetzt wurden.

### Kann ich einen Figma-Farbverlauf als CSS kopieren?

Ja für lineare, radiale und Angular-Füllungen, über den Dev Mode oder das Inspect-Panel. Diamond-Verläufe haben kein CSS-Gegenstück und sollten als Bilder exportiert werden.