Créer un dégradé CSS linéaire, radial ou conique
Le générateur de dégradé CSS construit une valeur background prête à coller dans une feuille de style. Il permet de choisir le type de dégradé, l'angle, les couleurs, la position des stops et des presets. La prévisualisation est mise à jour en direct et le code produit peut être copié soit comme règle complète background: ...;, soit comme valeur seule. Cette approche évite de deviner la syntaxe exacte de linear-gradient, radial-gradient ou conic-gradient.
Types de dégradés disponibles
Un dégradé linéaire suit une direction exprimée en degrés, par exemple 135deg. Il est adapté aux boutons, fonds de section et cartes. Un dégradé radial part d'un centre circulaire et diffuse les couleurs vers l'extérieur, ce qui sert souvent à éclairer un arrière-plan ou créer un focus doux. Un dégradé conique tourne autour d'un point et peut produire des effets de roue chromatique, badges, graphiques ou fonds décoratifs. Dans l'outil, le réglage d'angle est utile pour les modes linéaire et conique, tandis que le radial utilise une forme circulaire.
Stops, presets et randomisation
Chaque stop combine une couleur HEX et une position en pourcentage. L'outil commence avec deux stops, puis permet d'en ajouter. Lors de l'ajout, la nouvelle position est calculée entre les deux dernières couleurs, ce qui donne un point de départ raisonnable au lieu d'empiler toutes les couleurs au même endroit. Vous pouvez modifier la couleur, déplacer le pourcentage, supprimer un stop lorsqu'il y en a plus de deux et utiliser les presets comme Purple Dream, Sunset, Ocean, Forest ou Mango. Le bouton de randomisation crée deux à quatre couleurs aléatoires avec des positions réparties sur toute la largeur.
Utilisation dans une interface
Le CSS généré peut être collé dans une classe, une variable de thème, un style inline ou un composant. Pour une interface lisible, gardez le contraste au premier plan : un texte blanc sur un dégradé clair peut devenir illisible sur certaines zones. Si le dégradé sert de fond de héros ou de bannière, testez plusieurs largeurs d'écran, car la transition peut tomber derrière le texte différemment sur mobile et desktop. Les dégradés coniques et très saturés attirent beaucoup l'œil ; utilisez-les pour des accents, pas nécessairement pour tout un écran. Pour un rendu stable, conservez les couleurs en HEX et les positions en pourcentage plutôt que de copier une capture d'image.
Pourquoi copier deux formats
La copie de la règle complète convient à une classe CSS rapide, tandis que la copie de la valeur seule est plus pratique pour une variable, une propriété JavaScript ou un champ de thème.
Commentaires