Générateur de dégradés CSS
Créez un dégradé CSS linéaire ou radial visuellement et copiez le CSS prêt à l'emploi, directement dans votre navigateur.
🔒 Traitement local dans votre navigateur
Loading…
Comment l'utiliser
- Choisissez Linéaire ou Radial comme type de dégradé. Pour les dégradés linéaires, faites glisser le curseur ou saisissez une valeur pour définir l'angle en degrés.
- Chaque point de couleur possède une pastille de couleur et une position (0-100 %). Cliquez sur une pastille pour choisir une couleur, ou saisissez une position pour déplacer ce point le long du dégradé.
- Utilisez « Ajouter un point » pour ajouter jusqu'à 5 points de couleur, ou « Supprimer » à côté d'un point pour le retirer (un minimum de 2 points est requis).
- L'aperçu au-dessus du CSS généré se met à jour en direct dès que vous ajustez un réglage — aucun bouton à cliquer.
- Cliquez sur Copier pour copier la déclaration CSS générée, prête à coller dans votre feuille de style.
Fonctionnalités
- Prend en charge les dégradés linéaires (angle réglable) et radiaux
- Jusqu'à 5 points de couleur, chacun avec sa propre couleur et sa position
- Aperçu en direct qui se met à jour instantanément à chaque réglage
- Copie en un clic de la déclaration CSS prête à coller
- 100 % côté client — votre dégradé ne quitte jamais votre navigateur
Questions fréquentes
Cet outil envoie-t-il mon dégradé quelque part ?
Non. Le dégradé est généré et prévisualisé entièrement avec du JavaScript et du CSS locaux — rien n'est jamais téléversé ni envoyé à un serveur.
Combien de points de couleur puis-je ajouter ?
Jusqu'à 5 points. Au moins 2 points sont nécessaires pour qu'un dégradé ait un sens, donc le bouton Supprimer est désactivé une fois qu'il n'en reste que 2.
Le réglage de l'angle a-t-il un effet sur les dégradés radiaux ?
Non. Les dégradés radiaux de cet outil rayonnent toujours depuis le centre en cercle, donc le réglage d'angle ne s'applique qu'aux dégradés linéaires.
Que se passe-t-il si deux points ont la même position ?
C'est autorisé et peut être utilisé volontairement pour créer une transition nette plutôt qu'un fondu — les deux points sont conservés dans le CSS généré.
Puis-je coller le résultat directement dans mon fichier CSS ?
Oui. Le champ de sortie affiche une déclaration `background: ...;` complète que vous pouvez coller telle quelle dans une feuille de style ou un style en ligne.