Il est observé à partir de la syntaxe que la fonction linéaire-gradient () dépend du paramètre de direction et des couleurs utilisées.

Le paramètre de direction définit le point de départ et accepte les valeurs suivantes:

• «To Top» ou «0deg»: commence par le bas vers le haut
• «À droite» ou «90deg»: le gradient commence de gauche vers le côté droit
• «En bas» ou «180deg»: du haut jusqu'en bas
• «À gauche» ou «270deg»: commence du côté droit vers le côté gauche

Les paramètres indiqués ci-dessus ont l'équivalence avec les angles. Comme, vous pouvez définir le début du dégradé avec l'aide d'angles également. L'équivalence des angles et des côtés est décrite comme: «TO TOP» = ”0deg», «à droite» = »90deg», «vers le bas» = »180deg» et «à gauche» = »270deg».

Exemple 1: Gradient linéaire avec paramètres par défaut

Pour pratiquer le gradient linéaire à un niveau de base, nous avons utilisé le code suivant.

Html

Gradient linéaire

CSS

Dans le code ci-dessus, le paramètre de direction de la fonction linéaire-gradient est défini sur la valeur par défaut. Où le dégradé commencerait de la couleur verte et passerait à la couleur rouge.

Sortir

Depuis la sortie, il est observé que la direction par défaut de la fonction linéaire est de haut en bas.

Exemple 2: un dégradé linéaire personnalisé

Cet exemple démontre la création d'un gradient avec des valeurs personnalisées de direction et des angles de couleur.

Html

Gradient linéaire

CSS

Le code CSS ci-dessus est décrit comme,

• à droite: montre la direction du gradient de gauche à droite
• Green 10%: montre que l'effet de transition commencera à partir de 10% de toute la durée du gradient
• Red 50%: Cela montre que l'effet de transition va jusqu'à 50% de la durée du gradient

Sortir

La sortie montre que le vert massif continue jusqu'à la longueur de 10%. La transition commence à 10% et se poursuit jusqu'à 50% de la longueur. Après 50%, la couleur rouge solide commence qui se terminera par la longueur du gradient.

Exemple 3: un gradient linéaire répétitif

La fonction répétitive-linéaire () peut être utilisée pour créer un gradient répétitif.

Html

Un dégradé linéaire répétant

CSS

Le code CSS ci-dessus est décrit comme,

• La direction serait de gauche à droite car l'angle est de 90 degrés
• Le dégradé commencerait du rouge suivi du vert et du vert marin léger. Ces couleurs seront répétées jusqu'à ce que la longueur du gradient se termine

Note: Vous devez définir le pourcentage avec au moins la dernière couleur. Sinon, le motif ne se répétera pas.

Sortir

La sortie ci-dessus montre que le dégradé avec des couleurs rouge, vert et lightagreen se répète plusieurs fois jusqu'à la longueur du dégradé.

Conclusion

Un gradient linéaire dans CSS peut être créé en utilisant la fonction de gradient linéaire () de CSS. Cette fonction accepte plusieurs paramètres qui définissent la direction du gradient et la couleur utilisée. Cet article fournit un guide descriptif sur les gradients linéaires dans CSS. En suivant ce post, vous seriez en mesure d'obtenir le concept de base des gradients linéaires dans CSS avec des exemples démontrant la création de gradients linéaires dans CSS. De plus, une fonction répétitive-linéaire () peut être exercée pour créer un gradient répétitif.