Démarrez avec Shutterstock
SEMrush
En savoir plus sur ces produits

Générateur de gradients CSS3

Les dégradés CSS3 vous permettent d'afficher des variations progressives entre deux couleurs ou plus, à la place d'images. Pour chacune des 4 couleurs proposées, vous pouvez sélectionner la position en % ainsi que l'opacité.

Preview

Enregistré!

Réinitialisé!
Code CSS à copier
 

Gradient expliquée

La propriété gradient vous permet de créer des dégradés de couleurs sans avoir à utiliser d'images. Cela permet d'alléger le chargement des sites, et d'intervenir à tout moment sur la définition du dégradé, par exemple sur le survol de la souris.

Il ne faut pas oublier d'ajouter systématiquement les préfixes de navigateurs, car certaines versions encore utilisées de nos jours, n'avaient pas encore standardisé la propriété gradient.

Voici la syntaxe pour obtenir un dégradé linéaire de deux couleurs :

#MonDiv { background: #FFC38A; background: -moz-linear-gradient(90deg, #FFC38A, #CB77FF); background: -o-linear-gradient(90deg, #FFC38A, #CB77FF); background: linear-gradient(90deg, #FFC38A, #CB77FF);
}

La première ligne permet d'afficher une simple couleur dans le cas où le gradient ne fonctionnerait pas sur le navigateur. Le dégradé linéaire accepte comme paramètres un angle, suivi d'une liste de couleurs séparées par des virgules. Il n'y a pas de limite au nombre de couleurs à ajouter au dégradé.

Il est posible d'ajouter une valeur de position pour chaque couleur, en ajoutant le paramètre stop, comme le montre l'exemple ci-dessous

#MonDiv { background: -webkit-linear-gradient(90deg, #FFC38A 50%, #CB77FF 100%); background: -moz-linear-gradient(90deg, #FFC38A 50%, #CB77FF 100%); background: -o-linear-gradient(90deg, #FFC38A 50%, #CB77FF 100%); background: linear-gradient(90deg, #FFC38A 50%, #CB77FF 100%);
}

Compatibilité des navigateurs :

transform (2D)


36.0
4.0 -webkit-

10.0
9.0 -ms-

16.0
3.5 -moz-

9.0
3.2 -webkit-

23.0
15.0 -webkit-
10.5 -o-
transform (3D)

36.0
12.0 -webkit-

12.0

10.0

9.0
4.0 -webkit-

23.0
15.0 -webkit-

Laisser votre avis