CSS-Verläufe in Figma: linear, radial, konisch und was als Ersatz bleibt

Figma kennt vier Verlaufstypen, CSS hat drei Verlaufsfamilien. Die Zuordnung geht also nicht eins zu eins auf. Linear und radial lassen sich sauber umsetzen, wenn man die Winkelkonventionen beachtet. Figmas Angular-Verlauf ist dieselbe Idee wie conic-gradient() in CSS. Figmas Diamond-Verlauf hat gar keine CSS-Funktion und braucht deshalb einen bewusst gewählten Ersatz.

Diese Referenz richtet sich an Designer, die Füllungen übergeben, und an Entwickler, die sie nachbauen. Sie behandelt die Typzuordnung, die Winkel- und Formregeln, die gern Fehler verursachen, die konische Syntax, den Umgang mit Diamond und die Browserunterstützung im Jahr 2026.

Die vier Verlaufstypen in Figma

Die Figma-Hilfeseite nennt vier Verlaufstypen, die du auf eine Füllung oder eine Kontur anwenden kannst:

• Linear: ein fortlaufender Übergang zwischen zwei Farben entlang einer Geraden.
• Radial: ein kreisförmiger Verlauf mit einer Farbe in der Mitte, die zum Rand hin in eine andere Farbe übergeht.
• Angular: ein Verlauf, der von der Startposition aus im Uhrzeigersinn fortschreitet.
• Diamond: ein Verlauf mit vier Punkten, der in der Mitte des Objekts beginnt; Breite und Höhe sind einzeln einstellbar.

Jeder Verlauf beginnt mit zwei Farbstopps. Du verschiebst sie per Ziehen, fügst weitere per Klick auf den Farbregler oder das Plussymbol hinzu und entfernst sie mit Delete oder der Minus-Schaltfläche. "Flip gradient" kehrt die Reihenfolge der Stopps um, "Rotate gradient" ändert die Ausrichtung. Stopps können außerdem Variablen verwenden, und ein Verlauf lässt sich als Stil speichern.

Die Zuordnung in einer Tabelle

CSS kennt außerdem wiederholende Formen jeder Familie: repeating-linear-gradient(), repeating-radial-gradient() und repeating-conic-gradient(). Figma hat keinen eigenen Wiederholungstyp. Das sind also ein Mustermittel auf der CSS-Seite und nichts, was man aus einem Entwurf übersetzt.

Linear und radial: die abweichenden Konventionen

linear-gradient und der Winkel

In CSS wird der Winkel von linear-gradient() im Uhrzeigersinn gemessen. 0deg zeigt von unten nach oben, 90deg von links nach rechts, so beschreibt es MDNs Leitfaden zu CSS-Verläufen. Ohne Winkel läuft der Verlauf von oben nach unten. Du kannst auch Schlüsselwörter wie to right oder to bottom right verwenden.

.hero {
  background-image: linear-gradient(70deg, blue, pink);
}

Genau hier geht bei Übergaben oft etwas schief. Ein Figma-Verlauf wird durch Anfasser auf der Ebene definiert, nicht durch eine einzelne CSS-Zahl. Den Winkel, den du auf der Arbeitsfläche abliest, musst du also umrechnen. In einem Figma-Community-Thread zum Export von Verläufen heißt es, bei der Umrechnung über die API sei der Winkel manchmal falsch ("the angle gets messed up sometimes"). Das ist ein einzelner anekdotischer Bericht und keine Regel. Trotzdem ist es ein guter Grund, den Winkel per Augenmaß an der gerenderten Seite zu prüfen, bevor du einer umgerechneten Zahl traust.

Form, Größe und Position bei radial-gradient

radial-gradient() nimmt eine Form, eine Größe und eine Position: radial-gradient(shape size at position, stops). Die Form ist circle oder ellipse, Standard ist ellipse. Die Größenschlüsselwörter sind closest-side, closest-corner, farthest-side und farthest-corner, Standard ist farthest-corner. Die Position folgt auf at, etwa at 25% 75%.

.glow {
  background-image: radial-gradient(circle closest-side at 25% 75%, red, yellow 10%, dodgerblue 50%, beige);
}

Wenn eine radiale Figma-Füllung auf einer quadratischen Ebene wie ein Kreis aussieht, auf einer breiten Ebene aber gestreckt wirkt, braucht das CSS ein explizites circle, weil die Standardform ellipse der Box folgt. Stopp-Positionen können Prozentwerte oder Längen sein. Stopps ohne Position werden gleichmäßig verteilt, der erste bei 0 % und der letzte bei 100 %.

Stopps, harte Stopps und Hinweise

Zwei Stopps an derselben Position ergeben eine harte Kante. linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%) liefert einen scharfen Schnitt. Ein Farbhinweis, also eine einzelne Position zwischen zwei Farben wie in lime, 20%, cyan, verschiebt den Mittelpunkt des Übergangs. Figma erreicht dasselbe über die Platzierung der Stopps. Eine harte Kante sind einfach zwei Stopps an derselben Stelle.

Angular ist konisch

Figmas Angular-Verlauf und CSS conic-gradient() teilen dasselbe Modell: Die Farben laufen im Uhrzeigersinn um einen Mittelpunkt. MDNs Referenz zu conic-gradient() nennt die Syntax:

.wheel {
  background-image: conic-gradient(from 45deg at 50% 50%, blue, red);
}

from <angle> legt fest, wo der Umlauf beginnt. Erlaubt sind deg, grad, rad und turn, der Standard ist 0deg, also die 12-Uhr-Position. at <position> legt den Mittelpunkt fest, nutzt die Syntax von background-position und steht standardmäßig auf center. Du kannst auch einen Interpolationsraum wählen, zum Beispiel in oklch.

Stopps sind Winkel, keine Prozentwerte einer Linie

Konische Stopps werden über Winkel positioniert. Lässt du die Positionen weg, werden sie gleichmäßig verteilt, der erste Stopp bei 0deg und der letzte bei 360deg. Figma platziert Angular-Stopps entlang seines eigenen Farbreglers, deshalb musst du jede Position in Grad oder Umdrehungen umrechnen. Ein Stopp bei 25 % des Reglers wird zu 90deg oder 0.25turn.

Harte Stopps und das Tortenmuster

Gleiche Winkel ergeben harte Kanten. So zeichnet man ein Tortenstück:

.pie {
  background-image: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

Eine Warnung von MDN gilt auch für die Design-Übergabe. Verläufe sind Bilder, und Screenreader geben sie nicht aus. Verwende keinen konischen Verlauf, um Daten zu transportieren, die jemand lesen muss. Für ein echtes Diagramm nimmst du SVG oder semantisches Markup.

Ich habe nicht überprüft, welches CSS ein bestimmtes Werkzeug für eine Angular-Füllung erzeugt. Verstehe die Zuordnung oben als konzeptionelle Regel und prüfe generierte Ausgaben am gerenderten Ergebnis.

Diamond: keine CSS-Funktion, was bleibt als Ersatz

CSS definiert lineare, radiale und konische Verläufe samt ihren wiederholenden Formen. Eine Diamond-Funktion gibt es nicht. Eine Diamond-Füllung aus Figma lässt sich daher nicht als einzelner background-image-Wert schreiben.

Dir bleiben drei ehrliche Optionen:

1. Mit gestapelten Verläufen annähern. Schichte linear-gradient()-Ebenen mit transparenten Stopps. Das funktioniert bei einfachen Formen und wird schnell fragil.
2. Als Bild oder SVG behalten. Ist die Raute eine dekorative Füllung mit festen Maßen, ist ein exportiertes Asset das vorhersehbarste Ergebnis.
3. Als radial neu entwerfen. Kommt es mehr auf den Look als auf die exakte Form an, ist radial-gradient() der nächstliegende native Verlauf.

Das sind Empfehlungen, keine Messergebnisse. Ich behaupte nicht, wie ein bestimmtes Werkzeug eine Diamond-Füllung exportiert, weil ich das nicht überprüft habe. Entscheide bewusst, statt den Ersatz erst im Review zu entdecken.

Browserunterstützung und der Fallback, den du schreibst

conic-gradient() ist laut MDN seit November 2020 in Baseline breit verfügbar. Can I use nennt für 2026 eine globale Unterstützung von 97.21 %, mit Chrome 69, Edge 79, Safari 12.1 und Firefox 83 als ersten unterstützenden Versionen. Internet Explorer und Opera Mini unterstützen ihn nicht.

Ein Verlauf ist ein Bild, keine Farbe, und funktioniert daher nicht in background-color. Ein Farb-Fallback muss deshalb eine eigene Deklaration sein, die vor dem Verlauf steht:

.badge {
  background-color: #3b5bdb;
  background-image: conic-gradient(from 0deg, #3b5bdb, #e8590c, #3b5bdb);
}

Browser, die den Verlauf nicht parsen können, verwerfen diese Deklaration und behalten die einfarbige Fläche. Verläufe haben außerdem keine intrinsische Größe und dehnen sich auf die Box, in die sie gemalt werden.

Stolpersteine, wenn ein Verlauf die Grenze überquert

Wenn du eine fertige Seite in Figma holst oder eine Figma-Füllung in Code überführst, prüfe jedes Mal dieselbe kurze Liste:

• Den Winkel, gegen die CSS-Konvention, bei der 0deg nach oben zeigt.
• Die Stopp-Positionen, in der Einheit, die das Ziel erwartet: Prozent bei linear, Winkel bei konisch.
• Die Mittelpunktposition und bei radial Form und Größenschlüsselwörter.
• Stopps, die an Figma-Variablen gebunden sind und auf der CSS-Seite aufgelöste Werte sind.

Wenn du bestehende Seiten importierst, ist UnHTML eine Möglichkeit, die Ebenen nach Figma zu bringen. Dieselbe Liste gilt auch für dessen Ausgabe: Öffne die Verlaufsfüllungen und vergleiche sie mit der Seite.

Zusammenfassung

Linear und radial lassen sich umsetzen, sobald du die Winkel- und Formregeln beherrschst. Angular ist konisch, mit Stopps in Grad. Diamond hat keine CSS-Funktion, also wähle bewusst zwischen Annäherung, Asset oder radialem Neuentwurf. Schreibe vor jedem Verlauf, den du auslieferst, ein einfarbiges background-color.

Häufig gestellte Fragen

Hat Figma einen konischen Verlauf?

Figma nennt ihn Angular-Verlauf. Er schreitet von der Startposition im Uhrzeigersinn fort und folgt damit demselben Umlaufmodell wie CSS conic-gradient(). In CSS beginnt der Umlauf bei 12 Uhr und dreht sich im Uhrzeigersinn.

Gibt es in CSS ein Gegenstück zu Figmas Diamond-Verlauf?

Keine einzelne CSS-Verlaufsfunktion zeichnet eine Raute. CSS kennt lineare, radiale und konische Verläufe sowie wiederholende Varianten. Eine Raute muss angenähert werden, etwa durch gestapelte Verläufe, oder als Bild erhalten bleiben.

Wohin zeigt 0deg bei einem CSS-linear-gradient?

0deg zeigt von unten nach oben und 90deg von links nach rechts, jeweils im Uhrzeigersinn wachsend. Ohne Winkel läuft der Verlauf standardmäßig von oben nach unten. Deshalb stimmt ein Winkel, den du an einem Figma-Anfasser abliest, selten direkt mit der CSS-Zahl überein.

Kann ich conic-gradient in Produktion einsetzen?

Can I use nennt für 2026 eine globale Unterstützung von 97.21 %, mit Chrome 69, Edge 79, Safari 12.1 und Firefox 83 als ersten Versionen. Internet Explorer und Opera Mini unterstützen ihn nicht, setze daher vorher ein einfarbiges background-color.