Entrée
Préparation de votre espace de travail…
Mode d’emploi
- Choisissez Linéaire ou Radial et les deux couleurs.
- Ajustez les arrêts et, en mode linéaire, l’angle.
- Copiez le CSS et appliquez la déclaration background à l’élément.
Contrôler un dégradé CSS
Un dégradé CSS crée un fond à partir de couleurs plutôt que d’un fichier image. Il s’adapte à une carte, une bannière ou une section tout en restant modifiable en CSS.
Ce générateur utilise deux couleurs. Choisissez une direction linéaire ou un dégradé radial circulaire centré, puis placez les arrêts pour définir la transition.
Direction et arrêts
L’angle s’applique au mode linéaire. Le mode radial utilise un cercle centré dans l’élément, sans réglage d’angle.
Les positions vont de 0 % à 100 %. Les rapprocher resserre la transition ; les placer au même point crée une séparation nette.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);Dégradé linéaire à deux arrêts utilisant les couleurs et l’angle indiqués.
Ce que représente l’aperçu
L’aperçu utilise directement le CSS généré. Ses proportions peuvent différer de celles de l’élément final, surtout en mode radial.
Le premier arrêt ne peut pas suivre le second. L’outil génère une couche à deux couleurs ; ajoutez d’autres arrêts ou couches dans votre feuille de style.
Appliquer la déclaration
La sortie commence par background:. Appliquez-la au sélecteur voulu et vérifiez les images, couleurs et raccourcis de fond qu’elle peut remplacer.
Texte de 1 MiB maximum. Les transformations CSS et HTML s'exécutent dans un worker avec une limite de 30 secondes. Les outils de couleur utilisent sRGB ; les styles générés sont des aperçus à tester dans votre propre mise en page.
Questions fréquentes
Puis-je ajouter une troisième couleur ?
Cet éditeur accepte deux arrêts. Ajoutez manuellement d’autres arrêts séparés par des virgules dans le CSS copié.
Pourquoi aucun angle en mode radial ?
Un dégradé radial circulaire centré se déploie depuis le centre. L’angle concerne uniquement le mode linéaire.
Puis-je créer une coupure nette ?
Oui. Placez les deux arrêts à la même position pour supprimer la transition.
Un fichier image est-il généré ?
Non. Copier le CSS fournit une déclaration background. Le navigateur dessine le dégradé lors de son application.
Pourquoi le dégradé diffère-t-il sur mon élément ?
Les dimensions et proportions de destination influencent le rendu. Vérifiez-le sur l’élément réel, pas seulement dans l’aperçu.