Le générateur de dégradés CSS vous permet de concevoir des dégradés linéaires, radiaux et coniques en temps réel — ajustez les arrêts de couleur, l'angle et les positions, puis copiez le CSS prêt à l'emploi.
Fonctionnalités
- 3 types de dégradés : linéaire (directionnel), radial (du centre vers l'extérieur) et conique (rotationnel — idéal pour les diagrammes circulaires et les roues de couleurs).
- Contrôle de l'angle : réglez 0–360° pour les types linéaire et conique avec un curseur ou une saisie numérique précise ; le bouton de rotation ajoute 45° à chaque clic.
- Arrêts de couleur : chaque arrêt a son propre sélecteur de couleur et curseur de position (0–100 %). Minimum 2 arrêts — ajoutez-en autant que vous le souhaitez.
- 10 préréglages sélectionnés dont Sunset, Ocean, Aurora et Conic Pride — cliquez pour charger un préréglage comme point de départ.
- Grand aperçu en direct : le panneau d'aperçu de 192 px et la fine barre de dégradé se mettent à jour instantanément pendant la modification.
- Copie CSS en un clic : obtenez le CSS complet background: gradient(...); prêt à coller dans n'importe quelle feuille de style ou attribut style.
Comment l'utiliser ?
- Choisissez un type de dégradé, définissez les arrêts de couleur et l'angle, ou partez d'un préréglage.
- Vérifiez l'aperçu et ajoutez ou retirez des arrêts de couleur selon les besoins.
- Copiez le CSS généré.