Générateur de dégradés CSS — créez des dégradés dans votre navigateur
Concevez un dégradé visuellement et copiez le CSS en un clic.
Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers ne sont jamais téléversés — ils restent sur votre appareil.
- 0%
- 100%
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);Écrire la syntaxe d'un dégradé à la main est délicat — un mauvais pourcentage ou une unité oubliée et tout l'arrière-plan tombe à plat. Ce générateur vous permet de construire le dégradé visuellement : ajoutez autant d'arrêts de couleur que vous le souhaitez, faites glisser leur position, basculez entre linéaire et radial, et regardez l'aperçu se mettre à jour instantanément.
Tout s'exécute dans votre navigateur. Il n'y a pas d'inscription, pas d'aller-retour avec un serveur ni rien à installer — le CSS est généré sur votre appareil dès que vous modifiez un réglage, prêt à être copié directement dans votre feuille de style.
Comment utiliser Générateur de dégradés CSS
- Choisissez un type de dégradé — linéaire ou radial.
- Pour un dégradé linéaire, réglez l'angle en degrés.
- Ajustez chaque arrêt de couleur avec le sélecteur de couleur et son curseur de position.
- Ajoutez ou supprimez des arrêts jusqu'à ce que l'aperçu vous convienne.
- Cliquez sur « Copier le CSS » pour copier la règle background générée.
Questions fréquentes
Quel CSS cela génère-t-il ?
Il produit une seule propriété background utilisant la fonction standard linear-gradient() ou radial-gradient(), que vous pouvez coller directement dans n'importe quelle feuille de style ou style en ligne.
Combien d'arrêts de couleur puis-je ajouter ?
Autant que nécessaire. Chaque arrêt possède sa propre couleur et sa propre position, et le dégradé se met à jour en direct à mesure que vous en ajoutez, modifiez ou supprimez.
L'angle s'applique-t-il aux dégradés radiaux ?
Non. L'angle n'affecte que les dégradés linéaires. Les dégradés radiaux se diffusent vers l'extérieur depuis le centre, c'est pourquoi le réglage de l'angle est masqué lorsque le mode radial est sélectionné.
Quelque chose est-il envoyé à un serveur ?
Non. L'outil s'exécute entièrement dans votre navigateur. Vos couleurs et le CSS généré ne quittent jamais votre appareil.