Fonction CSS repeating-conic-gradient()

Définition et utilisation

CSS repeating-conic-gradient() La fonction est utilisée pour répeter la gradation conique.

Exemple :

Gradation conique Gradation conique répétée
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

Exemple

Exemple 1

Un dégradé conique répété :

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

Essayez-le vous-même

Exemple 2

Défini une dégradé conique répété avec des points de départ et d'arrêt de couleur définis :

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Essayez-le vous-même

Exemple 3

Un autre dégradé conique répété avec un angle de départ et un point central fixé :

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Essayez-le vous-même

Syntaxe CSS

repeating-conic-gradient([from angle], [at position,] degree de couleur, degree de couleur, ... );
Valeur Description
from angle

Optionnel. La dégradé conique entière est tournée d'un angle donné.

La valeur par défaut est 0deg.
at position

Optionnel. Définir le point central de la dégradé conique.

La valeur par défaut est center.
degree de couleur, ... , degree de couleur

Le point de terminaison de la couleur est la couleur que vous souhaitez présenter en transition douce entre elle.

Cette valeur est composée de valeurs de couleur et d'une ou deux positions d'arrêt optionnelles (angle entre 0 et 360 degrés ou pourcentage entre 0% et 100%)

Détails techniques

Version : Module CSS Images Level 4

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

Pages associées

Tutoriel :Dégradé CSS

Référence :Propriété background-image CSS

Référence :Fonction CSS conic-gradient()

Référence :Fonction CSS linear-gradient()

Référence :Fonction CSS radial-gradient()

Référence :Fonction repeating-linear-gradient() CSS

Référence :Fonction CSS repeating-radial-gradient()