Générateur de dégradé CSS
Concevez visuellement un dégradé linéaire, radial ou conique et copiez le CSS en un clic.
background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);
Comment utiliser Générateur de dégradé CSS
- Choisissez un type de dégradé et définissez l'angle pour un dégradé linéaire ou conique.
- Ajoutez des points de couleur et faites glisser chacun à la position souhaitée.
- Copiez le CSS généré directement dans votre feuille de style.
À propos de Générateur de dégradé CSS
Créez un dégradé CSS visuellement et copiez le code une fois le résultat satisfaisant. Choisissez d'abord le type : linéaire, radial ou conique. Pour les dégradés linéaires et coniques, vous définissez un angle compris entre 0 et 360 degrés, qui contrôle la direction dans laquelle les couleurs se déplacent ou tournent ; un dégradé radial, lui, est tracé comme un cercle qui s'étend depuis le centre. Un aperçu en direct se met à jour au fur et à mesure, de sorte que vous concevez en fonction du résultat réel plutôt qu'à l'aveugle.
Ajoutez autant de points de couleur que vous le souhaitez, avec un minimum de deux. Chaque point dispose d'un sélecteur de couleur et d'un curseur de position de 0 à 100 %, et les points sont triés automatiquement selon leur position, ce qui permet d'insérer une nouvelle couleur n'importe où et de la voir se placer au bon endroit. C'est ainsi que l'on obtient des dégradés multicolores fluides ou des bandes nettes, selon que les positions sont rapprochées ou non.
Le résultat est une déclaration background prête à coller, en syntaxe CSS standard pour les dégradés ; copiez-la directement dans votre feuille de style. L'outil génère une seule propriété background et n'ajoute pas de préfixes propriétaires, que les navigateurs modernes n'exigent plus pour les dégradés. Pour placer une ombre sous votre élément, consultez le générateur d'ombre portée (box-shadow), et pour affiner une valeur de couleur, le convertisseur hexadécimal vers RGB est bien pratique.
Questions fréquentes
Quelle est la différence entre un dégradé linéaire, radial et conique ?
Un dégradé linéaire mélange les couleurs le long d'une ligne droite dont vous définissez la direction avec un angle. Un dégradé radial les répand vers l'extérieur depuis le centre, en cercle. Un dégradé conique les fait tourner autour d'un point central comme une roue chromatique, également contrôlée par un angle.
Combien de couleurs puis-je utiliser ?
Autant que vous le souhaitez, avec un minimum de deux. Chaque couleur est un point disposant de son propre sélecteur et d'une position de 0 à 100 %. Ajouter davantage de points permet de créer des dégradés multicolores ou, en rapprochant les points, des bandes de couleur nettes.
À quoi sert le curseur de position ?
Il détermine l'emplacement de chaque couleur le long du dégradé, de 0 % au début à 100 % à la fin. Les points sont triés automatiquement par position, donc déplacer l'un au-delà d'un autre les réorganise correctement. Des positions rapprochées créent une transition franche ; des positions espacées créent un dégradé doux.
Ai-je besoin de préfixes propriétaires pour le dégradé ?
Non. L'outil génère du CSS standard, sans préfixe, car les navigateurs actuels prennent en charge les dégradés sans préfixe. Les anciennes syntaxes comme -webkit- ou -moz- ne sont plus nécessaires pour les types de dégradés produits ici.
Que contient exactement le résultat du bouton copier ?
Une simple déclaration CSS background utilisant la syntaxe standard des dégradés, prête à coller dans votre feuille de style. Elle définit une seule propriété background ; elle ne génère pas de règle complète ni de classe, alors insérez-la dans le sélecteur de votre choix.