Catégorie: Développement
Générateur de dégradé CSS
Composez un dégradé linéaire ou radial et copiez le CSS
Choisissez deux ou trois couleurs, réglez l'angle, prévisualisez en direct et copiez une déclaration background-image prête à coller. Tout est rendu dans votre navigateur.
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
Un dégradé se juge mieux à l'œil qu'à l'écriture, c'est pourquoi cet outil peint le CSS réel dans un panneau d'aperçu à mesure que vous le modifiez. Choisissez un dégradé linéaire avec son angle en degrés ou un dégradé radial centré, ajoutez une couleur intermédiaire pour un mélange à trois arrêts, puis copiez la déclaration directement dans votre feuille de style.
Mode d'emploi
- Choisissez un dégradé linéaire ou radial.
- Sélectionnez les couleurs de départ et de fin, et au besoin une couleur intermédiaire.
- Réglez l'angle, puis copiez la déclaration CSS.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Quelque chose est-il envoyé ?
- Non. L'aperçu est un fond CSS peint par votre navigateur et la déclaration est construite dans la page : rien ne part vers un serveur.
- Faut-il des préfixes propriétaires ?
- Pas pour les navigateurs actuels : linear-gradient et radial-gradient sans préfixe sont pris en charge depuis des années.
- Dans quel sens va l'angle ?
- En CSS, 0deg va du bas vers le haut et l'angle croît dans le sens horaire : 90deg va de gauche à droite et 180deg de haut en bas.