Générateur de dégradé CSS — linéaire et radial
Prévisualisez un dégradé à deux couleurs et copiez sa déclaration CSS background
Traitement dans le navigateur · aucun envoi de fichier
Les positions vont de 0 à 100 % ; le départ ne peut pas dépasser l’arrivée. Les dégradés radiaux s’étendent depuis le centre.
CSS du dégradé généré.
Mode d’emploi
- Choisissez un dégradé linéaire ou radial.
- Sélectionnez la couleur de départ et la couleur d’arrivée.
- Pour un dégradé linéaire, réglez l’angle, puis ajustez les deux positions de couleur entre 0 et 100 %.
- Vérifiez l’aperçu et copiez le CSS dans la règle de style de votre élément.
Arrêts de couleur et direction
Les couleurs sont écrites en hexadécimal à six chiffres. Avant le premier arrêt, le dégradé garde la première couleur ; après le second, il garde la seconde. La zone entre les deux contient la transition. La position de départ ne peut pas dépasser celle d’arrivée.
Les dégradés linéaires suivent l’angle choisi. Les dégradés radiaux utilisent radial-gradient(circle, ...) et s’étendent du centre vers l’extérieur. Le réglage de l’angle n’est pas utilisé en mode radial. Si votre élément final n’a pas les mêmes dimensions que l’aperçu, la répartition visible des couleurs peut changer.
Exemples
linear-gradient(90deg, #6366f1 0%, #ec4899 100%)passe du violet à gauche au rose à droite.- Placer les deux arrêts à 50 % crée une séparation nette entre les couleurs.
- En mode radial, déplacer le premier arrêt à 25 % agrandit la zone de couleur unie autour du centre avant que le mélange commence.
Appliquer le résultat
La déclaration générée utilise la propriété raccourcie background, qui peut réinitialiser d’autres propriétés d’arrière-plan du même élément. Vérifiez les règles existantes avant de la coller dans votre feuille de style.
Cet outil gère deux couleurs opaques. Pour davantage d’arrêts ou des couleurs transparentes, modifiez le CSS copié séparément. Si du texte est posé sur le dégradé, vérifiez le contraste sur toutes les zones situées derrière ce texte, pas seulement à une extrémité. L’aperçu montre le fond ; ce n’est pas un contrôle d’accessibilité complet. La génération a lieu dans votre navigateur.
Questions fréquentes
Dans quel sens fonctionnent les angles CSS ?
Pour un dégradé linéaire, 0 degré pointe vers le haut, 90 degrés vers la droite et 180 degrés vers le bas. L’angle détermine la direction dans laquelle les couleurs progressent.
Et si les deux arrêts de couleur ont la même position ?
Les couleurs changent d’un coup à cette position : on obtient une limite nette au lieu d’une transition douce.
L’outil exporte-t-il une image ?
Non. Il produit une déclaration CSS background. Le navigateur dessine le dégradé à la taille de l’élément auquel vous l’appliquez.
Puis-je utiliser plus de deux couleurs ou de la transparence ?
L’outil gère deux couleurs opaques. Pour ajouter des arrêts ou des couleurs transparentes, modifiez à la main le CSS copié.
