🎨 Générateur de dégradés CSS

À propos du générateur de dégradés CSS

Construisez un dégradé CSS visuellement et copiez une déclaration background prête à l’emploi. L’aperçu utilise exactement le CSS copié : ce que vous voyez est ce que vous obtenez.

Fonctionnalités

• Trois types de dégradés : linear-gradient, radial-gradient et conic-gradient
• Direction ou angle : directions prédéfinies ou n’importe quel angle de 0 à 360°
• Position et forme : point central et forme cercle/ellipse pour les dégradés radiaux et coniques
• Arrêts de couleur : choisissez où chaque couleur commence et s’arrête (0 à 100 %)
• Aperçu en direct et copie en un clic

Comment utiliser l’outil

• Étape 1 : choisissez le type de dégradé
• Étape 2 : choisissez une direction ou un angle (linéaire), une forme et une position (radial) ou un angle de départ et une position (conique)
• Étape 3 : choisissez les deux couleurs et, si besoin, leurs positions
• Étape 4 : cliquez sur « Copier le CSS » et collez-le dans votre feuille de style

Cas d’usage

• Fonds de bannières, de boutons et de cartes
• Roues chromatiques et effets « camembert » avec les dégradés coniques
• Effets de projecteur ou de vignettage avec les dégradés radiaux

Conseils & bonnes pratiques

• 0deg pointe vers le haut et les angles tournent dans le sens horaire : 90deg équivaut à « vers la droite »
• Donner la même position aux deux couleurs crée une transition nette (rayures)
• Un dégradé est une image : utilisez background ou background-image, pas background-color

Confidentialité & sécurité

Tout fonctionne localement dans votre navigateur. Aucune donnée n’est envoyée à un serveur.