Générateur de dégradé CSS
Concevez visuellement un dégradé d'arrière-plan et copiez un CSS prêt à l'emploi. Déplacez les points de couleur le long de la barre, cliquez sur la barre pour en ajouter, changez l'angle ou le centre et rendez des couleurs transparentes. Le code inclut une couleur unie de secours pour les anciens navigateurs.
Comment l'utiliser
- Choisissez linéaire, radial ou conique, ou partez d'un modèle ou d'un dégradé aléatoire.
- Cliquez sur un point pour modifier sa couleur, son opacité et sa position ; faites-le glisser, ou cliquez sur la barre pour en ajouter un autre.
- Copiez le CSS et collez-le dans la règle de l'élément.
Questions fréquentes
Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?
Un dégradé linéaire change de couleur le long d'une ligne droite selon l'angle choisi. Un dégradé radial s'étend depuis un centre en cercle ou en ellipse. Un dégradé conique tourne autour d'un centre, comme les aiguilles d'une horloge, ce qui est utile pour les roues chromatiques et les diagrammes circulaires.
Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?
Oui. Les dégradés linéaires, radiaux et coniques fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari, sans préfixes. La première ligne de background est une simple couleur, utilisée seulement par les très anciens navigateurs.
Comment faire des rayures ?
Placez deux points de la même couleur au début et à la fin de chaque rayure, pour que la couleur change brusquement au lieu de se fondre, et activez Répéter. Le dernier modèle en est un exemple.
🏷️ Générateur de balises meta
🖼️ Générateur Open Graph
🔗 Générateur de liens UTM
🔲 Générateur de box-shadow CSS