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é.





Options

Ici vous pouvez personnaliser l'apparance de la zone de visualisation des effets.

Enregistré!
Réinitialisé!


Code CSS à copier



Compatibilité des navigateurs

Pour aller plus loin

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%);
}


Laisser votre avis