27 exemples de dégradés de fond CSS élégants

Rester au courant des principales tendances et normes de conception Web est très important pour un concepteur ou un développeur. Actuellement, les dégradés d'arrière-plan sont largement utilisés dans les sites Web modernes.

Dans cet article, nous vous guiderons à travers différents exemples de dégradés d'arrière-plan utilisant CSS.

Dégradés d'arrière-plan à l'aide de CSS

Le dégradé CSS affiche une transition en douceur en utilisant deux ou plusieurs couleurs spécifiées. Le dégradé CSS offre un meilleur contrôle et de meilleures performances par rapport à l'utilisation d'un fichier image réel (d'un dégradé). Les image de fond La propriété CSS est utilisée pour déclarer les dégradés comme arrière-plan.

si j'achète un iphone d'apple est-il débloqué

Il existe trois types de dégradés : linéaire (créé avec le gradient linéaire() fonction), radial (créé avec radial-gradient() fonction), et conique (créé avec le conique-gradient() fonction). En outre, vous pouvez créer des dégradés répétés avec le répétition-linéaire-gradient() , répétition-radial-gradient() , et répétition-conique-gradient() les fonctions.

MDN Docs définit ces fonctions comme :

gradient linéaire() : La fonction CSS linear-gradient() crée une image consistant en une transition progressive entre deux ou plusieurs couleurs le long d'une ligne droite. Son résultat est un objet de la type de données, qui est un type spécial de .

radial-gradient() : Les radial-gradient() La fonction CSS crée une image constituée d'une transition progressive entre deux ou plusieurs couleurs qui rayonnent à partir d'une origine. Sa forme peut être un cercle ou une ellipse. Le résultat de la fonction est un objet du type de données, qui est un type spécial de .

conique-gradient() : Les conique-gradient() La fonction CSS crée une image composée d'un dégradé avec des transitions de couleurs tournées autour d'un point central (plutôt que de rayonner à partir du centre). Des exemples de dégradés coniques incluent les camemberts et les roues chromatiques. Le résultat de la conique-gradient() la fonction est un objet de la type de données, qui est un type spécial de .

répétition-linéaire-gradient() : Les répétition-linéaire-gradient() La fonction CSS crée une image consistant à répéter des dégradés linéaires. C'est similaire à gradient/linear-gradient() et prend les mêmes arguments, mais il répète les arrêts de couleur à l'infini dans toutes les directions afin de couvrir tout son conteneur. Le résultat de la fonction est un objet du type de données, qui est un type spécial de .

répétition-radial-gradient() : Les répétition-radial-gradient() La fonction CSS crée une image composée de dégradés répétés qui rayonnent à partir d'une origine. C'est similaire à gradient/radial-gradient() et prend les mêmes arguments, mais il répète les arrêts de couleur à l'infini dans toutes les directions afin de couvrir tout son conteneur, similaire à gradient/repeating-linear-gradient(). Le résultat de la fonction est un objet du type de données, qui est un type spécial de .

répétition-conique-gradient() : Les répétition-conique-gradient() La fonction CSS crée une image composée d'un dégradé répété (plutôt que d'un seul dégradé) avec des transitions de couleurs tournées autour d'un point central (plutôt que de rayonner à partir du centre).

Voici la syntaxe officielle de chaque type de dégradé.

Syntaxe officielle des gradients linéaires

linear-gradient(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

Syntaxe officielle des gradients radiaux

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

Syntaxe officielle des gradients coniques

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

Voici quelques exemples de dégradés d'arrière-plan impressionnants qui peuvent améliorer l'interface utilisateur de votre site Web au niveau supérieur.