Il est très important pour un concepteur ou un développeur de se tenir au courant des tendances et des normes les plus récentes en matière de conception de sites web. Actuellement, les dégradés d’arrière-plan sont largement utilisés dans les sites web modernes.
Inspirez-vous de ces exemples de dégradés d’arrière-plan pour votre prochaine création CSS.
Dégradés d’arrière-plan avec CSS
Un dégradé CSS affiche une transition en douceur à l’aide de deux ou plusieurs couleurs spécifiées. Les dégradés CSS offrent un meilleur contrôle et de meilleures performances que l’utilisation d’un fichier image d’un dégradé que vous pouvez créer à l’aide d’outils tels qu’Adobe Illustrator. Utilisez la fonction background-image Propriété CSS permettant de déclarer des dégradés comme arrière-plan.
Il existe trois types de gradients : linéaire (créé avec le linear-gradient() ), radial (créé avec le radial-gradient() ), et conique (créée avec le logiciel conic-gradient() ). Vous pouvez également créer des dégradés répétitifs avec la fonction gradient linéaire répétitif(), répétition-radial-gradient()et répétition du gradient cyclique() fonctions.
Les MDN Docs définissent ces fonctions comme suit :
linear-gradient() : 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 type <gradient> ; qui est un type spécial de données <image> ;.
radial-gradient() : La fonction radial-gradient() Cette 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 de type <gradient> ; qui est un type spécial de données <image> ;.
conic-gradient() : La fonction conic-gradient() Cette fonction CSS crée une image constituée d’un dégradé dont les transitions de couleur sont tournées autour d’un point central (au lieu de rayonner à partir du centre). Parmi les exemples de dégradés coniques, on peut citer les camemberts et les roues de couleurs. Le résultat de la fonction conic-gradient() est un objet de la classe <gradient> ; qui est un type spécial de données <image> ;.
répétant le gradient linéaire() : La fonction repeating-linear-gradient() Cette fonction CSS crée une image composée de dégradés linéaires répétitifs. Elle est similaire à gradient/linear-gradient() et prend les mêmes arguments, mais elle répète les arrêts de couleur à l’infini dans toutes les directions pour couvrir l’ensemble de son conteneur. Le résultat de la fonction est un objet de type <gradient> ; qui est un type spécial de données <image> ;.
La méthode repeating-radial-gradient() : La fonction repeating-radial-gradient() Cette fonction CSS crée une image composée de dégradés répétitifs qui rayonnent à partir d’un point d’origine. Elle est similaire à gradient/radial-gradient() et prend les mêmes arguments, mais elle répète les arrêts de couleur à l’infini dans toutes les directions pour couvrir l’ensemble de son conteneur, comme gradient/repeating-linear-gradient(). Le résultat de la fonction est un objet de type <gradient> ; qui est un type spécial de données <image> ;.
répétition du gradient cyclique() : La fonction répétition du gradient cyclique() La fonction CSS crée une image constituée d’un dégradé répétitif (plutôt qu’un dégradé unique) avec des transitions de couleurs tournées autour d’un point central (plutôt que rayonnant à partir du centre).
Le code utilisé dans cet article est sous licence MIT.
Voici la syntaxe officielle de chaque type de dégradé.
Syntaxe des gradients linéaires
linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]
Syntaxe des gradients radiaux
radial-gradient(
[ <ending-shape> || <size> ]? [ at <position> ]? ,
<color-stop-list>
);
Syntaxe des gradients coniques
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)
Voici quelques exemples impressionnants de dégradés d’arrière-plan créés à l’aide de la propriété CSS background-image qui peuvent améliorer l’interface utilisateur de votre site web.
1. Herbe poussiéreuse
Utilisez le CSS suivant pour créer le dégradé ci-dessus :
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
2. Du sable au bleu
Pour créer le dégradé illustré ci-dessus, utilisez le code CSS suivant :
background-image: linear-gradient(to right, #DECBA4, #3E5151);
3. Kye Meh
Utilisez le code CSS suivant pour créer l’arrière-plan linéaire dégradé ci-dessus :
background-image: linear-gradient(to right, #8360c3, #2ebf91);
4. Amin
Utilisez le CSS suivant pour créer le dégradé ci-dessus :
background-image: linear-gradient(to right, #8e2de2, #4a00e0);
5. Rouge relaxant
Avec une seule ligne de code CSS, vous pouvez ajouter un magnifique dégradé d’arrière-plan à votre site web :
background-image: linear-gradient(to right, #fffbd5, #b20a2c);
6. Lumière sublime
Essayez d’utiliser ce CSS pour créer un arrière-plan dégradé. Il est facile à utiliser et ajoutera une touche de style à votre site :
background-image: linear-gradient(to right, #fc5c7d, #6a82fb);
7. Mégatron
Utilisez le CSS suivant pour créer un dégradé de trois couleurs :
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
8. Framboise bleue
Utilisez le CSS suivant pour créer un simple arrière-plan en dégradé linéaire bleuté :
background-image: linear-gradient(to right, #00b4db, #0083b0);
9. Premium Dark
Obtenez le dégradé illustré ci-dessus avec ce code CSS de dégradé linéaire :
background-image: linear-gradient(to right, #434343 0%, black 100%);
10. Cristallin
Utilisez le CSS suivant pour créer le dégradé ci-dessus :
background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
11. Lawrencium
Utilisez le CSS suivant pour créer le dégradé ci-dessus. Vous pouvez également utiliser ce code pour créer d’autres dégradés avec des couleurs différentes.
background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);
12. Ohhappiness
Ajoutez une touche de style à votre site avec ce fond dégradé CSS facile à utiliser :
background-image: linear-gradient(to right, #00b09b, #96c93d);
13. La souche
Vous souhaitez ajouter un peu d’éclat à votre site Web ? Essayez d’utiliser ce CSS pour créer un arrière-plan en dégradé :
background-image: linear-gradient(to right, #870000, #190a05);
14. Mangue jaune
Utilisez le CSS suivant pour créer l’arrière-plan en dégradé radial ci-dessus :
background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);
15. Herbe juteuse
Transformez vos éléments HTML en un clin d’œil grâce à ce code CSS :
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );
16. Poisson rose
Utilisez le CSS suivant pour créer l’arrière-plan linéaire dégradé ci-dessus :
background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));
17. Seigneur des mers
Utilisez le CSS suivant pour créer le dégradé ci-dessus :
background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
18. Fleur de cerisier
Ce code CSS crée un dégradé de couleur cerise. Vous pouvez également l’utiliser pour créer d’autres dégradés de couleurs différentes :
background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);
19. L’air frais
Pour créer le dégradé illustré ci-dessus, utilisez le code CSS suivant :
background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );
20. Stellaire
Utilisez le CSS suivant pour créer un dégradé bleu qui ne manquera pas d’attirer l’attention :
background-image: radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% );
21. De midi au crépuscule
Transformez vos éléments HTML avec une seule ligne de code CSS, et ajoutez un magnifique dégradé d’arrière-plan en toute simplicité :
background-image: linear-gradient(to right, #ff6e7f, #bfe9ff);
22. Lever de soleil
Votre site web peut avoir un dégradé de lever de soleil en ajoutant simplement une ligne de code CSS :
background-image: linear-gradient(to right, #ff512f, #f09819);
23. Forêt
Utilisez le CSS suivant pour créer le dégradé ci-dessus. Vous pouvez également l’utiliser pour créer d’autres dégradés avec des couleurs différentes, ce qui vous offre des possibilités infinies de personnalisation de votre site.
background-image: linear-gradient(to right, #5a3f37, #2c7744);
24. Superman
Obtenez le dégradé illustré ci-dessus avec ce code CSS de dégradé linéaire :
background-image: linear-gradient(to right, #0099f7, #f11712);
25. L’espace des profondeurs
Utilisez le CSS suivant pour donner à l’arrière-plan un aspect professionnel et soigné :
background-image: linear-gradient(to right, #2c3e50, #4ca1af);
26. Royal
Utilisez le CSS suivant pour créer l’arrière-plan linéaire dégradé ci-dessus :
background-image: linear-gradient(to right, #141e30, #243b55);
27. Corail orange
Utilisez le CSS suivant pour créer le dégradé ci-dessus :
background-image: linear-gradient(to right, #ff9966, #ff5e62);
28. Le vieux vin
Vous pouvez créer un style de dégradé rose foncé en utilisant le code CSS suivant :
background-image: linear-gradient(to right, #33001b, #ff0084);
29. Ciel du matin
Utilisez le CSS suivant pour créer un dégradé de ciel clair du matin :
background-image: linear-gradient(to right, #b6fbff, #83a4d4);
30. Caramel
Faites ressortir votre arrière-plan avec ce dégradé linéaire CSS :
background-image: linear-gradient(to right, #FFD194, #D1913C);
31. Crépuscule
Vous souhaitez captiver votre public ? Incorporez cet extrait de code CSS pour créer un arrière-plan en dégradé sur le thème du crépuscule qui rehaussera l’attrait de votre site Web.
background-image: linear-gradient(to right, #9796f0, #fbc7d4);
32. Margo White
Créez un arrière-plan dégradé simple et attrayant en appliquant ce code CSS :
background-image: linear-gradient(to right, #ffefba, #ffffff);
33. Du soir à la nuit
Obtenez le même effet de dégradé séduisant que celui présenté ci-dessus en utilisant ce code CSS de dégradé linéaire :
background-image: linear-gradient(to right, #005aa7, #fffde4);
34. Vue sur l’océan
Améliorez l’esthétique de votre site web avec ce code CSS simple pour créer un arrière-plan de dégradé linéaire captivant :
background-image: linear-gradient(to right, #a8c0ff, #3f2b96);
35. Plume
Utilisez cet extrait de code CSS pour créer un arrière-plan dégradé similaire à celui affiché ci-dessus :
background-image: linear-gradient(to right, #d3cce3, #e9e4f0);
Rendez votre page Web élégante avec les dégradés
Vous pouvez utiliser les dégradés avec plusieurs éléments de votre page web comme l’arrière-plan, les bordures, les icônes, les boutons, le texte, le soulignement, les puces de liste, etc. Donnez une nouvelle dimension à la conception de votre site.
Si vous souhaitez donner de la vie à certains éléments fades de votre page web, vous pouvez essayer la propriété CSS box-shadow. Elle donnera à ces éléments un aspect moderne.