Générateur de dégradé CSS

Ajouter à mes outils

Créez facilement des dégradés CSS linéaires ou radiaux. Choisissez vos couleurs, la direction et copiez le code CSS généré instantanément.

Choisissez deux couleurs et le type de dégradé pour générer le code CSS correspondant.

Montrez moi un exemple !

Créer un dégradé CSS

Les dégradés CSS : guide complet

Les dégradés CSS permettent de créer des transitions fluides entre deux ou plusieurs couleurs, sans utiliser d'images. Ils sont supportés par tous les navigateurs modernes.

Dégradé linéaire (linear-gradient)

Un dégradé linéaire crée une transition de couleur le long d'une ligne droite. Vous pouvez choisir la direction.

Dégradé radial (radial-gradient)

Un dégradé radial crée une transition qui rayonne à partir d'un point central vers l'extérieur.

Utilisation en CSS

Copiez simplement le code CSS généré et collez-le dans vos feuilles de style :

.mon-element {
  background: linear-gradient(to bottom, #3498DB, #9B59B6);
}
Nos autres outils similaires