Générateur de Dégradé CSS
Qu'est-ce que Générateur de Dégradé CSS
Un générateur de dégradé CSS permet de créer un dégradé linéaire ou radial visuellement et de copier le CSS exact. Choisissez le type de dégradé, réglez l'angle (linéaire) ou la forme et la position (radial), ajoutez autant de points de couleur que nécessaire et placez chacun à la bonne position. L'aperçu se met à jour instantanément, et la zone de sortie affiche toujours une déclaration background prête à coller.
Comment utiliser
- Choisissez Linéaire ou Radial comme type de dégradé.
- Ajustez le curseur d'angle pour les dégradés linéaires, ou choisissez la forme et la position pour les radiaux.
- Réglez la couleur et la position de chaque point, et ajoutez-en d'autres avec le bouton Ajouter un point.
- Copiez le CSS généré dans la zone de sortie et collez-le dans votre feuille de style.
Quand l'utiliser
Vous créez une section hero et avez besoin d'un fond bleu vers rose en douceur ? Réglez deux points à 0% et 100%, choisissez un angle et copiez background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); directement dans votre CSS. Tout aussi utile pour les overlays de cartes, les états au survol des boutons, ou une lueur radiale derrière un logo, sans ajuster la syntaxe du dégradé à la main dans les devtools.
Questions fréquentes
Quelle est la différence entre un dégradé linéaire et un dégradé radial ?
Un dégradé linéaire fait transitionner les couleurs le long d'une ligne droite selon un angle fixe, comme un coucher de soleil passant de l'orange au violet. Un dégradé radial fait transitionner les couleurs depuis un point central, en cercle ou en ellipse, comme un projecteur ou un effet de lueur.
Combien de points de couleur puis-je ajouter ?
Autant que vous voulez. Chaque dégradé a besoin d'au moins deux points pour s'afficher, et vous pouvez en ajouter avec le bouton Ajouter un point pour créer des transitions à plusieurs couleurs, comme un arc-en-ciel ou une palette de marque.
Que signifie le pourcentage de position sur chaque point ?
La position indique où cette couleur atteint sa pleine intensité le long du dégradé, de 0% (le début) à 100% (la fin). Déplacer la position d'un point change où sa couleur domine et comment elle se mélange avec ses voisines.
Le CSS généré fonctionne-t-il dans tous les navigateurs ?
Oui. linear-gradient() et radial-gradient() sont des fonctions CSS standard prises en charge par tous les navigateurs modernes, sans préfixe nécessaire.
Puis-je partager cet outil avec mon dégradé pré-rempli ?
Oui. L'URL se met à jour automatiquement pendant que vous construisez votre dégradé. Copiez-la depuis la barre d'adresse ou utilisez le bouton Partager, et quiconque l'ouvre voit exactement le même dégradé.
Outils connexes
Calculateur de Ratio d'Aspect
Calculez le ratio d'aspect, trouvez la largeur ou la hauteur manquante et redimensionnez images et vidéos en gardant les proportions. Gratuit.
Générateur de Code-Barres
Générez des codes-barres EAN-13 ou Code 128 en ligne. Saisissez votre numéro ou texte et téléchargez en SVG ou PNG. Gratuit, sans inscription.
Décodeur Base64
Décodez des chaînes Base64 en texte brut instantanément. Supporte la sortie Unicode complète avec emojis. Décodeur Base64 gratuit.