Composez un dégradé CSS et copiez la déclaration exacte

Choisissez linéaire, radial ou conique, réglez l’angle et modifiez chaque arrêt : l’aperçu peint la même déclaration que le panneau de sortie imprime. Les positions restent entre 0 et 100 pour cent, l’angle entre 0 et 360 degrés, et l’atelier accepte de deux à huit arrêts.

Fonctionne localement dans votre navigateur

Voir la catégorie: Frontend et design (34)

· linéaire · radial · conique

Construire le dégradé et lire la déclaration copiée

L’atelier démarre sur linear-gradient(135deg, #0f9d66 0%, #2d5bff 55%, #7c3aed 100%). L’aperçu peint cette déclaration et le panneau de sortie l’imprime : le code copié est le dégradé que vous venez de voir.

Chaque contrôle a une limite mesurée : l’angle reste entre 0 et 360 degrés, les positions entre 0 et 100 pour cent, la liste entre deux et huit arrêts. Une valeur hors bornes est réécrite à la limite quand vous quittez le champ, au lieu d’être utilisée en silence par l’aperçu.

Choisissez le type. Linéaire et conique lisent le champ d’angle ; radial-gradient() n’a pas d’angle, le champ est donc verrouillé tant que Radial est sélectionné.

Réglez l’angle en linéaire ou conique. Saisissez de 0 à 360 ; 720 est enregistré comme 360 et -45 comme 0, et un champ vide restaure le dernier angle valide.

Modifiez chaque arrêt : choisissez une couleur ou saisissez un HEX à six chiffres, puis réglez la position de 0 à 100. Les positions gardent une décimale : 3.75 devient 3.8 et s’affiche 3.8%.

Ajoutez un arrêt pour couper le plus grand écart entre voisins (à partir de trois arrêts, les suivants tombent à 28, 78, 14, 42 et 67 pour cent), Arrêts inversés retourne la rampe, le bouton × supprime un arrêt.

Copier CSS place le panneau de sortie dans le presse-papiers caractère par caractère ; Réinitialiser revient à 135deg et aux trois arrêts de départ.

Valeurs de départ, nombres bornés à la validation et ce que cette page ne fait pas

Valeurs de départ et rôle des nombres

Trois arrêts, 135 degrés, linéaire : ce sont les valeurs au chargement et celles que Réinitialiser restaure. La sortie est une seule déclaration, .gradient-background { background: … ; }, triée par position : un arrêt ajouté entre 0 et 55 s’imprime avant 55 même s’il a été ajouté en dernier.

L’angle n’existe que pour linear-gradient() et conic-gradient(). Le conique l’imprime en from 90deg at center, le radial en circle at center sans angle. Les positions s’écrivent avec une décimale, la même précision que le champ après validation.

De deux à huit arrêts

Un dégradé demande au moins deux arrêts : à deux, le bouton × signale qu’il faut au moins deux couleurs au lieu d’en supprimer une. Huit est le plafond — à huit arrêts, Ajouter un arrêt de couleur est désactivé : la limite se voit au lieu d’être un clic sans effet.

L’ajout utilise le plus grand écart entre les arrêts existants, ce qui garde la rampe régulière : quatre arrêts passent de la valeur par défaut à 0, 28, 55 et 100 pour cent, les huit complets à 0, 14, 28, 42, 55, 67, 78 et 100. Arrêts inversés reflète chaque position (100 moins la position) et retourne la liste ; la déclaration exportée reste triée par position.

Ce que cette page ne fait pas

Les couleurs sont des HEX à six chiffres ou le sélecteur de couleur. La forme courte à trois chiffres, comme #fff, n’est pas développée : la page garde le dernier dégradé valide et demande six chiffres, et hsl() ou rgba() saisis dans un champ HEX sont refusés de la même façon.

Pas d’export image, SVG ou PNG, pas de curseur d’opacité ni de point d’interpolation, pas de seconde couche de dégradé, pas d’aperçu dans votre propre conteneur. La déclaration copiée depuis le panneau de sortie est tout le produit.