Dégradés CSS dans Figma : linéaire, radial, conique et ce qui sert de repli

Figma propose quatre types de dégradés et CSS en compte trois familles, la correspondance n'est donc pas de un pour un. Le linéaire et le radial se convertissent sans mal si l'on tient compte des conventions d'angle. Le dégradé angulaire de Figma est la même idée que conic-gradient() en CSS. Le dégradé diamant de Figma n'a aucune fonction CSS et demande donc un repli choisi délibérément.

Cette référence s'adresse aux designers qui transmettent des remplissages et aux développeurs qui les reconstruisent. Elle couvre la table de correspondance, les règles d'angle et de forme qui font trébucher, la syntaxe conique, le traitement du diamant et l'état de la prise en charge par les navigateurs en 2026.

Les quatre types de dégradés de Figma

La page d'aide de Figma liste quatre types de dégradés applicables à un remplissage ou à un contour :

• Linéaire : une transition progressive entre deux couleurs en ligne droite.
• Radial : un dégradé circulaire dont une couleur est au centre et passe à une autre couleur sur le bord.
• Angulaire : un dégradé qui progresse dans le sens horaire à partir de la position de départ.
• Diamant : un dégradé à quatre points qui part du centre de l'objet, dont la largeur et la hauteur se règlent séparément.

Chaque dégradé commence avec deux arrêts de couleur. On les déplace en les faisant glisser, on en ajoute en cliquant sur le curseur de couleur ou sur l'icône plus, et on les supprime avec Delete ou le bouton moins. "Flip gradient" inverse l'ordre des arrêts et "Rotate gradient" change l'orientation. Les arrêts peuvent aussi utiliser des variables, et un dégradé peut être enregistré comme style.

La correspondance en un tableau

CSS propose aussi des formes répétées de chaque famille : repeating-linear-gradient(), repeating-radial-gradient() et repeating-conic-gradient(). Figma n'a pas de type répété à part. Ce sont donc un outil de motifs côté CSS, et non quelque chose que l'on traduit depuis une maquette.

Linéaire et radial : les conventions qui diffèrent

linear-gradient et l'angle

En CSS, l'angle de linear-gradient() se mesure dans le sens horaire, 0deg pointant du bas vers le haut et 90deg de la gauche vers la droite, d'après le guide MDN des dégradés CSS. Sans angle, le dégradé va de haut en bas. On peut aussi utiliser des mots-clés comme to right ou to bottom right.

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

C'est là que les transmissions déraillent. Un dégradé Figma est défini par des poignées sur le calque, pas par un seul nombre CSS, donc l'angle lu sur le canevas doit être converti. Un fil de la communauté Figma sur l'export des dégradés rapporte que, lors d'une conversion via l'API, "the angle gets messed up sometimes". C'est un témoignage isolé, pas une règle. C'est pourtant une bonne raison de vérifier l'angle à l'œil sur la page rendue avant de se fier à un nombre converti.

Forme, taille et position de radial-gradient

radial-gradient() prend une forme, une taille et une position : radial-gradient(shape size at position, stops). La forme est circle ou ellipse, avec ellipse par défaut. Les mots-clés de taille sont closest-side, closest-corner, farthest-side et farthest-corner, ce dernier étant la valeur par défaut. La position suit at, comme dans at 25% 75%.

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

Si un remplissage radial de Figma ressemble à un cercle sur un calque carré mais s'étire sur un calque large, le CSS a besoin d'un circle explicite, car l'ellipse par défaut suit la boîte. Les positions des arrêts peuvent être des pourcentages ou des longueurs. Les arrêts sans position sont répartis uniformément, le premier à 0 % et le dernier à 100 %.

Arrêts, arrêts nets et indications

Deux arrêts à la même position créent un bord net. linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%) donne une coupure franche. Une indication de couleur, une position isolée entre deux couleurs comme dans lime, 20%, cyan, déplace le milieu de la transition. Figma obtient le même effet par le placement des arrêts. Un bord net, ce sont simplement deux arrêts placés au même endroit.

L'angulaire est conique

Le dégradé angulaire de Figma et conic-gradient() de CSS partagent le même modèle : les couleurs balaient le sens horaire autour d'un point central. La référence MDN de conic-gradient() donne la syntaxe :

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

from <angle> fixe le début du balayage. Il accepte deg, grad, rad et turn, et la valeur par défaut est 0deg, soit la position de midi. at <position> fixe le centre, utilise la syntaxe de background-position et vaut center par défaut. On peut aussi choisir un espace d'interpolation, par exemple in oklch.

Les arrêts sont des angles, pas des pourcentages d'une ligne

Les arrêts coniques se positionnent par angle. Si l'on omet les positions, ils sont répartis uniformément, le premier arrêt à 0deg et le dernier à 360deg. Figma place les arrêts angulaires le long de son propre curseur de couleur, il faut donc convertir chaque position en degrés ou en tours. Un arrêt à 25 % du curseur devient 90deg ou 0.25turn.

Arrêts nets et motif de camembert

Des angles égaux donnent des bords nets, c'est ainsi qu'on dessine une part de camembert :

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

Un avertissement de MDN vaut aussi pour la transmission de maquettes. Les dégradés sont des images, et les lecteurs d'écran ne les exposent pas. N'utilisez pas un dégradé conique pour porter des données que quelqu'un doit lire. Pour un vrai graphique, utilisez du SVG ou un balisage sémantique.

Je n'ai pas vérifié le CSS exact que produit un outil précis pour un remplissage angulaire. Prenez la correspondance ci-dessus comme la règle conceptuelle et comparez toute sortie générée au rendu.

Diamant : pas de fonction CSS, donc quel repli

CSS définit les dégradés linéaires, radiaux et coniques ainsi que leurs formes répétées. Il n'existe pas de fonction diamant. Un remplissage diamant de Figma ne peut donc pas s'écrire comme une seule valeur de background-image.

Vous avez trois options honnêtes :

1. L'approcher avec des dégradés superposés. Empilez des couches de linear-gradient() avec des arrêts transparents. Cela marche pour des formes simples et devient vite fragile.
2. Le garder comme image ou SVG. Si le diamant est un remplissage décoratif de dimensions fixes, un asset exporté est le résultat le plus prévisible.
3. Le redessiner en radial. Si l'aspect compte plus que la forme exacte, un radial-gradient() est le dégradé natif le plus proche.

Ce sont des conseils, pas des résultats mesurés. Je n'affirme pas comment un outil donné exporte un remplissage diamant, car je ne l'ai pas vérifié. Décidez volontairement plutôt que de découvrir le repli en revue.

Prise en charge des navigateurs et le repli que vous écrivez

Selon MDN, conic-gradient() est largement disponible dans Baseline depuis novembre 2020. Can I use indique 97.21 % de prise en charge mondiale en 2026, avec Chrome 69, Edge 79, Safari 12.1 et Firefox 83 comme premières versions compatibles. Internet Explorer et Opera Mini ne le prennent pas en charge.

Un dégradé est une image, pas une couleur, il ne fonctionne donc pas dans background-color. Le repli de couleur doit être une déclaration distincte, écrite avant le dégradé :

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

Les navigateurs qui ne peuvent pas analyser le dégradé ignorent cette déclaration et gardent la couleur unie. Les dégradés n'ont pas non plus de taille intrinsèque : ils s'étirent pour remplir la boîte dans laquelle ils sont peints.

Pièges quand un dégradé traverse la frontière

Quand vous amenez une page construite dans Figma, ou envoyez un remplissage Figma vers le code, vérifiez à chaque fois la même courte liste :

• L'angle, par rapport à la convention CSS où 0deg pointe vers le haut.
• Les positions des arrêts, dans l'unité attendue par la cible : pourcentages en linéaire, angles en conique.
• La position du centre et, en radial, la forme et les mots-clés de taille.
• Les arrêts liés à des variables Figma, qui sont des valeurs résolues côté CSS.

Si vous importez des pages existantes, UnHTML est un moyen d'amener les calques dans Figma, et la même liste s'applique à son résultat : ouvrez les remplissages en dégradé et comparez-les à la page.

Résumé

Le linéaire et le radial se convertissent dès que l'on maîtrise les règles d'angle et de forme. L'angulaire est conique, avec des arrêts en degrés. Le diamant n'a pas de fonction CSS : choisissez délibérément entre une approximation, un asset ou un redessin en radial. Écrivez un background-color uni avant tout dégradé que vous livrez.

Questions fréquentes

Figma a-t-il un dégradé conique ?

Figma l'appelle dégradé angulaire. Il progresse dans le sens horaire à partir de la position de départ, ce qui correspond au même modèle de balayage que conic-gradient() en CSS. Côté CSS, le balayage commence à midi et tourne dans le sens horaire.

Existe-t-il un équivalent CSS du dégradé diamant de Figma ?

Aucune fonction de dégradé CSS ne dessine un diamant. CSS propose des dégradés linéaires, radiaux et coniques, plus des variantes répétées. Un diamant doit être approché, par exemple avec des dégradés superposés, ou conservé comme image.

Où pointe 0deg dans un linear-gradient CSS ?

0deg pointe du bas vers le haut et 90deg de la gauche vers la droite, en augmentant dans le sens horaire. Sans angle, le sens par défaut va de haut en bas. C'est pourquoi un angle lu sur une poignée Figma coïncide rarement directement avec le nombre CSS.

Puis-je utiliser conic-gradient en production ?

En 2026, Can I use indique 97.21 % de prise en charge mondiale, avec Chrome 69, Edge 79, Safari 12.1 et Firefox 83 comme premières versions. Internet Explorer et Opera Mini ne le prennent pas en charge, ajoutez donc un background-color uni avant.