Générateur de dégradés CSS
Créez un dégradé visuellement — choisissez le type, l'angle et les points de couleur, observez l'aperçu en direct et copiez le CSS prêt à l'emploi.
Ensuite, essayez
Your files are processed locally in your browser. They are not uploaded to our servers.
Comment l'utiliser
- Choisissez le type de dégradé : linéaire, radial ou conique.
- Réglez l'angle et ajoutez ou déplacez des points de couleur jusqu'à ce que l'aperçu convienne.
- Copiez le CSS généré dans votre feuille de styles.
Qu'est-ce que cet outil ?
Le Générateur de dégradés CSS construit le CSS d'arrière-plan pour les dégradés linéaires, radiaux et coniques pendant que vous les concevez visuellement. Chaque point de couleur a son propre sélecteur et curseur de position, l'angle est réglable pour les types linéaire et conique, et l'aperçu se met à jour en direct à chaque changement. Le résultat est une déclaration background propre à coller dans n'importe quelle feuille de styles. Tout s'exécute dans votre navigateur.
Utilisations courantes
- Créer des arrière-plans de sections hero et de boutons pour un site
- Reproduire en CSS un dégradé issu d'une maquette
- Expérimenter avec les dégradés coniques pour des effets de type camembert
- Générer des arrière-plans subtils bicolores pour cartes et bannières
Questions fréquentes
Quelle est la différence entre dégradés linéaires, radiaux et coniques ?
Les linéaires mélangent les couleurs le long d'une ligne droite, les radiaux s'étendent du centre vers l'extérieur, et les coniques tournent autour du centre comme une roue chromatique.
Combien de points de couleur puis-je ajouter ?
Entre deux et six — suffisant pour la plupart des dégradés pratiques tout en gardant un CSS lisible.
Les dégradés générés fonctionnent-ils dans tous les navigateurs ?
Les linéaires et radiaux fonctionnent dans tout navigateur moderne. Les coniques sont pris en charge par toutes les versions actuelles de Chrome, Firefox, Safari et Edge.
Puis-je utiliser le CSS avec Tailwind ou styled-components ?
Oui — la sortie est une déclaration background standard ; utilisez la valeur dans tout système de styles qui accepte du CSS.