Générateur de dégradés CSS
Créez des dégradés CSS linéaires ou radiaux avec 2 à 10 étapes de couleur. Réglez angles, positions et transparence, utilisez des préréglages ou inversez les étapes, puis copiez ou téléchargez le CSS.
De 2 à 10 étapes, triées par pourcentage. Les positions identiques créent un bord net en conservant leur ordre. Transparence sur damier. Canaux sRGB sur 8 bits ; RGBA conserve l’alpha décimal.
Trois étapes simples.
- Choisissez linéaire ou radial, un préréglage ou vos propres couleurs.
- Modifiez couleurs et pourcentages ; ajoutez, retirez ou inversez les étapes.
- Vérifiez l’aperçu puis copiez le fond CSS ou téléchargez la feuille de style.
Quelques points à connaître.
Noms CSS standard et HEX/RGB/HSL numériques acceptés, positions de 0 à 100 %. Les étapes sont triées par position ; à position égale, l’ordre de la liste est conservé et peut créer une rupture nette. Le dégradé radial est un cercle centré. Interpolation et écrans peuvent varier ; ce n’est pas un outil d’impression.
Comment fonctionne la confidentialité →Questions fréquentes.
Le dégradé peut-il devenir transparent ?
Oui. Utilisez un alpha, par exemple #294C3900 ou rgba(41,76,57,0). Le damier indique les zones transparentes.
Que fait l’inversion ?
Elle inverse la liste et remplace chaque position par 100 moins son pourcentage initial. L’ordre des couleurs aux ruptures nettes est aussi inversé.