{"id":125066,"date":"2021-09-23T11:51:00","date_gmt":"2021-09-23T11:51:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/"},"modified":"2021-09-23T11:51:00","modified_gmt":"2021-09-23T11:51:00","slug":"comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/","title":{"rendered":"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web : Tendances &amp; Exemples"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"125066\" class=\"elementor elementor-125066 elementor-77550\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dc07cf3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dc07cf3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a141930\" data-id=\"a141930\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b0932f9 elementor-widget elementor-widget-text-editor\" data-id=\"b0932f9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les d\u00e9grad\u00e9s de couleurs ne sont pas nouveaux dans la conception web. Vous souvenez-vous du <a href=\"https:\/\/elementor.com\/blog\/skeuomorphism-ux-design\/\">skeuomorphisme<\/a> ? Nous utilisions les d\u00e9grad\u00e9s \u00e0 cette \u00e9poque pour donner aux objets num\u00e9riques un aspect tridimensionnel. <\/p>\n<p>Mais \u00e0 mesure que le design <a href=\"https:\/\/elementor.com\/blog\/minimalist-design\/\" target=\"_blank\" rel=\"noopener\">minimaliste<\/a> et <a href=\"https:\/\/elementor.com\/blog\/flat-design\/\" target=\"_blank\" rel=\"noopener\">\u00e9pur\u00e9<\/a> a envahi le web dans les ann\u00e9es 2010, nous avons vu les d\u00e9grad\u00e9s tomber de plus en plus en d\u00e9su\u00e9tude. Ce n&rsquo;\u00e9tait pas parce qu&rsquo;ils \u00e9taient d\u00e9pass\u00e9s, c&rsquo;est simplement que les concepteurs n&rsquo;en avaient pas beaucoup l&rsquo;utilit\u00e9 avec les tendances actuelles de la conception web. <\/p>\n<p>On pourrait affirmer que la refonte du logo d&rsquo;Instagram en 2016 a donn\u00e9 un nouveau souffle aux d\u00e9grad\u00e9s dans la conception web. Une fois que tout le monde a vu ce qu&rsquo;Instagram pouvait faire avec la couleur, il n&rsquo;a pas fallu longtemps avant que nous commencions \u00e0 voir des d\u00e9grad\u00e9s appara\u00eetre partout. <\/p>\n<p>Nous voici maintenant en 2021 et les d\u00e9grad\u00e9s sont toujours bien vivants. Si vous \u00eates curieux de savoir comment les utiliser ou si vous voulez simplement une dose majeure d&rsquo;inspiration, continuez votre lecture.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-40aaacf4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"40aaacf4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-187ebc64\" data-id=\"187ebc64\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f9cdecf read-more-link elementor-widget elementor-widget-heading\" data-id=\"f9cdecf\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\">Les Fondamentaux de la Th\u00e9orie des Couleurs que Chaque Concepteur Web Devrait Conna\u00eetre<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-962254a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"962254a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-071afdc\" data-id=\"071afdc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bc0ef04 blog-toc elementor-widget elementor-widget-heading\" data-id=\"bc0ef04\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table des Mati\u00e8res<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7a62c2 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"e7a62c2\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-are-color-gradients\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Que Sont les D\u00e9grad\u00e9s ?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#why-use-gradients\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Pourquoi Utiliser les D\u00e9grad\u00e9s en Conception Web<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-create-gradients\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Comment cr\u00e9er des d\u00e9grad\u00e9s en conception web<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#gradient-design-tips\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Conseils de conception de d\u00e9grad\u00e9s<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#web-design-gradient-trends\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Tendances et Exemples de D\u00e9grad\u00e9s en Conception Web<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f682413 elementor-widget elementor-widget-menu-anchor\" data-id=\"f682413\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"que-sont-les-degrades-de-couleurs\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1d54e6 elementor-widget elementor-widget-heading\" data-id=\"a1d54e6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Qu'est-ce Qu'un D\u00e9grad\u00e9 ?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f15d90c elementor-widget elementor-widget-text-editor\" data-id=\"f15d90c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Un d\u00e9grad\u00e9 est une transition graduelle d&rsquo;une couleur \u00e0 une autre. Il permet aux concepteurs de cr\u00e9er presque une nouvelle couleur.&nbsp;<\/span><\/p><p><span style=\"font-weight: 400\">Les d\u00e9grad\u00e9s font ressortir les objets en ajoutant une nouvelle dimension et du r\u00e9alisme \u00e0 un design. En termes simples, les d\u00e9grad\u00e9s ajoutent de la profondeur \u00e0 une image.<\/span><\/p>\n<p>Nous pouvons \u00e9galement faire r\u00e9f\u00e9rence aux d\u00e9grad\u00e9s comme des <em>cartes de couleurs<\/em> puisque le <a href=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\" target=\"_blank\" rel=\"noopener\">sch\u00e9ma chromatique<\/a> varie le long du d\u00e9grad\u00e9, contrairement aux couleurs unies qui n&rsquo;ont qu&rsquo;un seul code HEX.<\/p>\n<p>Voici un exemple de <strong>d\u00e9grad\u00e9 lin\u00e9aire ou axial<\/strong> :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4b8ea4 elementor-widget elementor-widget-image\" data-id=\"c4b8ea4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-1024x576.jpg\" class=\"attachment-large size-large wp-image-105926\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-1024x576.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-300x169.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-768x432.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-1536x864.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-2048x1152.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e76d04c elementor-widget elementor-widget-text-editor\" data-id=\"e76d04c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ce type de d\u00e9grad\u00e9 commence avec deux couleurs aux extr\u00e9mit\u00e9s oppos\u00e9es de l&rsquo;\u00e9l\u00e9ment. Dans ce cas, il s&rsquo;agit d&rsquo;un bleu plus clair dans le coin sup\u00e9rieur gauche et d&rsquo;un bleu plus fonc\u00e9 dans le coin inf\u00e9rieur droit. La couleur effectue une transition en douceur entre les deux.<\/p>\n<p>Voici un exemple de <strong>d\u00e9grad\u00e9 radial<\/strong> : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11fb306 elementor-widget elementor-widget-image\" data-id=\"11fb306\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-1024x576.jpg\" class=\"attachment-large size-large wp-image-105927\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-1024x576.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-300x169.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-768x432.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-1536x864.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-2048x1152.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e97c7e3 elementor-widget elementor-widget-text-editor\" data-id=\"e97c7e3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ce type de d\u00e9grad\u00e9 commence \u00e9galement avec deux couleurs. Cependant, le vert plus clair commence au centre du graphique et rayonne vers l&rsquo;ext\u00e9rieur jusqu&rsquo;\u00e0 ce qu&rsquo;il devienne le vert plus fonc\u00e9. <\/p>\n<p>Nous avons vu les d\u00e9grad\u00e9s de couleurs \u00eatre utilis\u00e9s dans tout. Des produits et emballages comme la ligne de parfums de <a href=\"https:\/\/www.zara.com\/\" target=\"_blank\" rel=\"noopener\">Zara<\/a> : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a84d5f4 elementor-widget elementor-widget-video\" data-id=\"a84d5f4\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/zara-perfume-gradient-product.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88270ad elementor-widget elementor-widget-text-editor\" data-id=\"88270ad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Aux tendances de coloration capillaire comme celles que nous avons vues sur les c\u00e9l\u00e9brit\u00e9s ces derni\u00e8res ann\u00e9es. Des c\u00e9l\u00e9brit\u00e9s telles que <a href=\"https:\/\/www.instagram.com\/iamcardib\/\" target=\"_blank\" rel=\"noopener\">Cardi B<\/a>, <a href=\"https:\/\/www.instagram.com\/sarahmgellar\/\" target=\"_blank\" rel=\"noopener\">Sarah Michelle Gellar<\/a>, et <a href=\"https:\/\/www.instagram.com\/kyliejenner\/\" target=\"_blank\" rel=\"noopener\">Kylie Jenner<\/a> ont toutes exp\u00e9riment\u00e9 avec les d\u00e9grad\u00e9s : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc088dd elementor-widget elementor-widget-image\" data-id=\"fc088dd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"495\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=495\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-1024x633.jpg\" class=\"attachment-large size-large wp-image-105913\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-1024x633.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-300x186.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-768x475.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-1536x950.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-2048x1266.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc226b5 elementor-widget elementor-widget-text-editor\" data-id=\"dc226b5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>L&rsquo;espace num\u00e9rique n&rsquo;est pas non plus \u00e9tranger \u00e0 la pr\u00e9pond\u00e9rance des d\u00e9grad\u00e9s. Les concepteurs d&rsquo;applications exp\u00e9rimentent avec les d\u00e9grad\u00e9s depuis un certain temps. En 2016, <a href=\"https:\/\/techcrunch.com\/2016\/05\/11\/instagrams-big-redesign-goes-live-with-a-colorful-new-icon-black-and-white-app-and-more\/\" target=\"_blank\" rel=\"noopener\">Instagram<\/a> a surpris tout le monde avec sa refonte en d\u00e9grad\u00e9, et observez maintenant l&rsquo;\u00e9tat de nos produits les plus populaires :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2987bc elementor-widget elementor-widget-image\" data-id=\"c2987bc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"827\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=827\/blog\/wp-content\/uploads\/2021\/09\/gradient-app-icons.jpg\" class=\"attachment-large size-large wp-image-105914\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=867\/blog\/wp-content\/uploads\/2021\/09\/gradient-app-icons.jpg 867w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=290\/blog\/wp-content\/uploads\/2021\/09\/gradient-app-icons-290x300.jpg 290w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/gradient-app-icons-768x794.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c80d35a elementor-widget elementor-widget-text-editor\" data-id=\"c80d35a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les d\u00e9grad\u00e9s de couleurs sont une <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\" target=\"_blank\" rel=\"noopener\">tendance de conception web<\/a> populaire aujourd&rsquo;hui et peuvent \u00eatre appliqu\u00e9s \u00e0 divers \u00e9l\u00e9ments d&rsquo;un site web. Par exemple : <\/p>\n<ul>\n<li>Logos<\/li>\n<li>\u00c9l\u00e9ments d&rsquo;en-t\u00eate<\/li>\n<li>Arri\u00e8re-plans<\/li>\n<li><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\" title=\"Typographie\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"5410\">Typographie<\/a><\/li>\n<li>Ic\u00f4nes<\/li>\n<li>Photos<\/li>\n<li>Boutons<\/li>\n<\/ul>\n<p>Au fur et \u00e0 mesure que nous progresserons dans le reste de cet article, nous examinerons de nombreux exemples de marques qui d\u00e9montrent certaines des choses remarquables que vous pouvez r\u00e9aliser avec les d\u00e9grad\u00e9s en conception web.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d76868 elementor-widget elementor-widget-menu-anchor\" data-id=\"3d76868\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"pourquoi-utiliser-les-degrades\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1041aee elementor-widget elementor-widget-heading\" data-id=\"1041aee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Pourquoi Utiliser les D\u00e9grad\u00e9s en Conception Web\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-549600d elementor-widget elementor-widget-text-editor\" data-id=\"549600d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ces derni\u00e8res ann\u00e9es, on a observ\u00e9 une r\u00e9surgence des d\u00e9grad\u00e9s de couleurs dans la conception web. De mani\u00e8re similaire \u00e0 la popularit\u00e9 du <a href=\"https:\/\/elementor.com\/blog\/what-is-material-design\/\" target=\"_blank\" rel=\"noopener\">Material Design<\/a> et du Flat Design 2.0, les d\u00e9grad\u00e9s de couleurs nous offrent un moyen d&rsquo;ajouter plus de texture, de profondeur et d&rsquo;excitation \u00e0 une page web qui serait autrement plate et sans vie. <\/p>\n<p>Il existe d&rsquo;autres raisons pour lesquelles nous utilisons des d\u00e9grad\u00e9s sur les sites web : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5779e1 elementor-widget elementor-widget-heading\" data-id=\"c5779e1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Pour Cr\u00e9er de Nouveaux Sch\u00e9mas de Couleurs\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-526f80c elementor-widget elementor-widget-text-editor\" data-id=\"526f80c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>La r\u00e8gle g\u00e9n\u00e9rale lors du choix d&rsquo;une palette de couleurs pour un site web est de s\u00e9lectionner pas plus de deux ou trois couleurs. Mais plut\u00f4t que d&rsquo;utiliser une couleur \u00e0 la fois, les d\u00e9grad\u00e9s de couleurs permettent de concevoir avec plusieurs couleurs simultan\u00e9ment. <\/p>\n<p>Prenez cet exemple de <a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener\">Spotify<\/a> : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbba4eb elementor-widget elementor-widget-image\" data-id=\"cbba4eb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient-1024x561.jpg\" class=\"attachment-large size-large wp-image-105928\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-82c67e3 elementor-widget elementor-widget-text-editor\" data-id=\"82c67e3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Plut\u00f4t que d&rsquo;utiliser un arri\u00e8re-plan uni violet, bleu ou noir pour la section d&rsquo;en-t\u00eate, le concepteur utilise un effet de d\u00e9grad\u00e9 pour les m\u00e9langer tous.<\/p>\n<p>Ce n&rsquo;est pas le seul endroit o\u00f9 Spotify utilise des d\u00e9grad\u00e9s. Le rapport <a href=\"https:\/\/loudandclear.byspotify.com\/\" target=\"_blank\" rel=\"noopener\">Loud  Clear<\/a> de Spotify regorge d&rsquo;arri\u00e8re-plans en d\u00e9grad\u00e9 et d&rsquo;animations :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38533f2 elementor-widget elementor-widget-video\" data-id=\"38533f2\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/loud-and-clear-report-page.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53cb5c8 elementor-widget elementor-widget-text-editor\" data-id=\"53cb5c8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ce choix de palette de couleurs apporte beaucoup de vie et de divertissement \u00e0 la marque Spotify partout o\u00f9 les utilisateurs et les artistes la rencontrent en ligne.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d085ca elementor-widget elementor-widget-heading\" data-id=\"3d085ca\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Pour Captiver les Visiteurs<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-571cb47 elementor-widget elementor-widget-text-editor\" data-id=\"571cb47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>L&rsquo;apparence d&rsquo;un d\u00e9grad\u00e9 de couleurs en soi peut \u00eatre tout \u00e0 fait captivante, m\u00eame si les couleurs sont att\u00e9nu\u00e9es et la transition subtile. Cela dit, les d\u00e9grad\u00e9s ne doivent pas n\u00e9cessairement \u00eatre statiques. <\/p>\n<p>Il suffit de regarder le site web de <a href=\"https:\/\/stripe.com\/\" target=\"_blank\" rel=\"noopener\">Stripe<\/a> pour un exemple de d\u00e9grad\u00e9s de couleurs en mouvement :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f03f2e elementor-widget elementor-widget-video\" data-id=\"1f03f2e\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/6-stripe-gradient-background.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1841d4a elementor-widget elementor-widget-text-editor\" data-id=\"1841d4a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Il y a beaucoup de couleurs en jeu ici et, pourtant, cela ne semble pas excessif. Au contraire, la fa\u00e7on presque semblable \u00e0 de la lave avec laquelle elles se fondent les unes dans les autres cr\u00e9e un effet impossible \u00e0 manquer. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8495bd0 elementor-widget elementor-widget-heading\" data-id=\"8495bd0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Pour Aider les Visiteurs \u00e0 Focaliser leur Attention\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5395859 elementor-widget elementor-widget-text-editor\" data-id=\"5395859\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Il existe de nombreuses fa\u00e7ons d&rsquo;attirer l&rsquo;attention d&rsquo;un visiteur avec la conception web. Les d\u00e9grad\u00e9s de couleurs s&rsquo;av\u00e8rent tr\u00e8s utiles \u00e0 cet \u00e9gard. <\/p>\n<p>Prenez cet exemple de <a href=\"https:\/\/www.pepsi.com\/\" target=\"_blank\" rel=\"noopener\">Pepsi<\/a> : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f846da5 elementor-widget elementor-widget-image\" data-id=\"f846da5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background-1024x561.jpg\" class=\"attachment-large size-large wp-image-105929\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-664eff9 elementor-widget elementor-widget-text-editor\" data-id=\"664eff9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>De nombreuses zones de cette page d&rsquo;accueil contiennent des nuances unies de bleu. Mais lorsque les visiteurs atteignent ce point de la page, le d\u00e9grad\u00e9 radial devrait les forcer \u00e0 s&rsquo;arr\u00eater. Ce n&rsquo;est pas \u00e0 cause du d\u00e9grad\u00e9 lui-m\u00eame, mais plut\u00f4t en raison de l&rsquo;effet de projecteur qu&rsquo;il cr\u00e9e autour de la canette Pepsi. <\/p>\n<p>Les d\u00e9grad\u00e9s lin\u00e9aires peuvent \u00e9galement \u00eatre utilis\u00e9s pour diriger l&rsquo;attention. G\u00e9n\u00e9ralement, ils sont dispos\u00e9s de mani\u00e8re directionnelle pour aider les yeux des visiteurs \u00e0 se d\u00e9placer correctement sur la page. <\/p>\n<p><a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener\">Sketch<\/a> fait cela tout au long de sa page d&rsquo;accueil. Prenez cette forme remplie de d\u00e9grad\u00e9 dans la section d&rsquo;en-t\u00eate :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6650fff elementor-widget elementor-widget-image\" data-id=\"6650fff\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient-1024x561.jpg\" class=\"attachment-large size-large wp-image-105930\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3042606 elementor-widget elementor-widget-text-editor\" data-id=\"3042606\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les bords plus clairs du d\u00e9grad\u00e9 sont susceptibles d&rsquo;attirer plus l&rsquo;attention que l&rsquo;int\u00e9rieur plus sombre. Lorsque les yeux des visiteurs se d\u00e9placent vers les bords plus clairs, la pointe de fl\u00e8che orient\u00e9e vers la droite les dirigera davantage vers l&rsquo;introduction du site. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-285c28f elementor-widget elementor-widget-image\" data-id=\"285c28f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients-1024x561.jpg\" class=\"attachment-large size-large wp-image-105931\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3741bb elementor-widget elementor-widget-text-editor\" data-id=\"c3741bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vous voyez \u00e9galement les d\u00e9grad\u00e9s plus bas sur la page. Encore une fois, les zones plus claires des blocs aident les yeux des utilisateurs \u00e0 se concentrer sur les messages qu&rsquo;ils contiennent.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52ed3d7 elementor-widget elementor-widget-heading\" data-id=\"52ed3d7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Pour Rendre la Conception Plus M\u00e9morable<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb356a5 elementor-widget elementor-widget-text-editor\" data-id=\"bb356a5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vous souvenez-vous quand Instagram a redessin\u00e9 son logo ? C&rsquo;\u00e9tait un \u00e9v\u00e9nement majeur et tout le monde en parlait (pour de bonnes et de mauvaises raisons), comme <a href=\"https:\/\/medium.com\/look-and-logo\/rethinking-instagrams-redesign-beyond-the-glyph-and-gradient-619090c7128c\" target=\"_blank\" rel=\"noopener\">Matt Knorr sur Medium<\/a>.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5dbc87 elementor-widget elementor-widget-image\" data-id=\"d5dbc87\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"495\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=495\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-1024x633.jpg\" class=\"attachment-large size-large wp-image-105915\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-1024x633.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-300x185.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-768x475.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-1536x949.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-2048x1266.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58ad986 elementor-widget elementor-widget-text-editor\" data-id=\"58ad986\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ce n&rsquo;\u00e9tait peut-\u00eatre pas le meilleur choix en termes d&rsquo;utilisabilit\u00e9, mais cela a laiss\u00e9 une impression m\u00e9morable sur ses utilisateurs et ce design en d\u00e9grad\u00e9 est un \u00e9l\u00e9ment qu&rsquo;il a conserv\u00e9 jusqu&rsquo;\u00e0 ce jour. <\/p>\n<p><a href=\"https:\/\/www.amdocs.com\/\" target=\"_blank\" rel=\"noopener\">Amdocs<\/a> est une autre marque qui a opt\u00e9 pour une identit\u00e9 visuelle en d\u00e9grad\u00e9 :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ca66d4 elementor-widget elementor-widget-video\" data-id=\"2ca66d4\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/9-amdocs-gradient-branding.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-712b3c0 elementor-widget elementor-widget-text-editor\" data-id=\"712b3c0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les indicateurs de menu, les boutons et les effets de survol en d\u00e9grad\u00e9 d&rsquo;Amdocs se d\u00e9marquent de mani\u00e8re saisissante par rapport \u00e0 l&rsquo;arri\u00e8re-plan sombre du site internet. Ils apparaissent \u00e9galement sur des surfaces plus \u00e9tendues, contrairement \u00e0 Instagram dont l&rsquo;identit\u00e9 visuelle se manifeste principalement par des d\u00e9tails infimes au sein de l&rsquo;application, g\u00e9n\u00e9ralement sur un fond blanc ou gris. <\/p>\n<p>De surcro\u00eet, des \u00e9l\u00e9ments cl\u00e9s du texte utilisent une palette de couleurs en d\u00e9grad\u00e9. Cela permet \u00e0 Amdocs d&rsquo;atteindre deux objectifs. Le premier est de rendre sa typographie plus m\u00e9morable. Le second est de mettre l&rsquo;accent sur son message de marque.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-237e27e elementor-widget elementor-widget-menu-anchor\" data-id=\"237e27e\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"comment-creer-des-degrades\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42ea6cd elementor-widget elementor-widget-heading\" data-id=\"42ea6cd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Comment cr\u00e9er des d\u00e9grad\u00e9s en conception web<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b996e8 elementor-widget elementor-widget-text-editor\" data-id=\"8b996e8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Il existe trois m\u00e9thodes courantes pour cr\u00e9er des d\u00e9grad\u00e9s pour un site internet : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-047dd75 elementor-widget elementor-widget-heading\" data-id=\"047dd75\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Option 1 : Utiliser CSS3\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-06e9491 elementor-widget elementor-widget-text-editor\" data-id=\"06e9491\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Si vous \u00eates \u00e0 l&rsquo;aise avec le codage des styles dans votre <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-wordpress\/\" title=\"site WordPress\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4756\">site WordPress<\/a>, vous pouvez ajouter des d\u00e9grad\u00e9s de cette mani\u00e8re. L&rsquo;extrait de code ressemblera \u00e0 ceci : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d0d9a3 elementor-widget elementor-widget-code-highlight\" data-id=\"1d0d9a3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>background: rgb(238,174,202);\r\nbackground: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96fdd93 elementor-widget elementor-widget-text-editor\" data-id=\"96fdd93\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ne vous inqui\u00e9tez pas si vous n&rsquo;\u00eates pas habitu\u00e9 \u00e0 r\u00e9diger du <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4467\">CSS<\/a> \u00e0 partir de z\u00e9ro. Vous pouvez utiliser <a href=\"https:\/\/cssgradient.io\/\" target=\"_blank\" rel=\"noopener\">CSS Gradient<\/a> pour cr\u00e9er vos d\u00e9grad\u00e9s :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e700f26 elementor-widget elementor-widget-image\" data-id=\"e700f26\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=409\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool-1024x523.png\" class=\"attachment-large size-large wp-image-105916\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool-1024x523.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool-300x153.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool-768x392.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1424\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool.png 1424w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34f2d08 elementor-widget elementor-widget-text-editor\" data-id=\"34f2d08\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Avec cet outil, vous pouvez : <\/p>\n<ul>\n<li>Ajouter ou supprimer des couleurs<\/li>\n<li>D\u00e9finir leur point de d\u00e9part et d&rsquo;arriv\u00e9e<\/li>\n<li>Augmenter ou att\u00e9nuer l&rsquo;intensit\u00e9<\/li>\n<li>D\u00e9finir le d\u00e9grad\u00e9 comme lin\u00e9aire ou radial <\/li>\n<li>Modifier le degr\u00e9 de rotation\n<\/li>\n<\/ul>\n<p>Une fois la configuration des param\u00e8tres termin\u00e9e, faites d\u00e9filer jusqu&rsquo;en bas et r\u00e9cup\u00e9rez le CSS. <\/p>\n<p>Si vous souhaitez simplifier davantage ce processus, vous pouvez utiliser le <a href=\"https:\/\/mycolor.space\/gradient3\" target=\"_blank\" rel=\"noopener\">g\u00e9n\u00e9rateur de d\u00e9grad\u00e9s \u00e0 3 couleurs de ColorSpace<\/a> \u00e0 la place :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1be1ee elementor-widget elementor-widget-image\" data-id=\"a1be1ee\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator-1024x561.jpg\" class=\"attachment-large size-large wp-image-105932\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c3229f elementor-widget elementor-widget-text-editor\" data-id=\"6c3229f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Choisissez simplement les trois couleurs que vous souhaitez utiliser, d\u00e9finissez l&rsquo;orientation, puis cliquez sur \u00ab G\u00e9n\u00e9rer \u00bb. Vos codes CSS appara\u00eetront en dessous.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a97c1ec elementor-widget elementor-widget-heading\" data-id=\"a97c1ec\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Option 2 : Utiliser des d\u00e9grad\u00e9s pr\u00e9d\u00e9finis\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-379c19e elementor-widget elementor-widget-text-editor\" data-id=\"379c19e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Si vous pr\u00e9f\u00e9rez ne pas cr\u00e9er vos propres d\u00e9grad\u00e9s, vous pouvez toujours obtenir des d\u00e9grad\u00e9s pr\u00e9d\u00e9finis en ligne.<\/p>\n<p><a href=\"https:\/\/uigradients.com\/\" target=\"_blank\" rel=\"noopener\">uiGradients<\/a> est un bon choix si vous souhaitez de l&rsquo;aide pour concevoir des sch\u00e9mas de couleurs en d\u00e9grad\u00e9 bas\u00e9s sur la couleur primaire avec laquelle vous travaillez : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b02a5c5 elementor-widget elementor-widget-image\" data-id=\"b02a5c5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator-1024x561.jpg\" class=\"attachment-large size-large wp-image-105933\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad3c065 elementor-widget elementor-widget-text-editor\" data-id=\"ad3c065\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vous pouvez ensuite r\u00e9cup\u00e9rer le CSS du d\u00e9grad\u00e9 que vous aimez ou l&rsquo;enregistrer au format JPG si vous souhaitez l&rsquo;utiliser comme arri\u00e8re-plan sur votre site. <\/p>\n<p>Une autre option est <a href=\"https:\/\/webgradients.com\/\" target=\"_blank\" rel=\"noopener\">WebGradients.com<\/a> : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b852a4 elementor-widget elementor-widget-image\" data-id=\"3b852a4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes-1024x561.jpg\" class=\"attachment-large size-large wp-image-105934\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4ae2e6 elementor-widget elementor-widget-text-editor\" data-id=\"a4ae2e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vous pouvez enregistrer ces d\u00e9grad\u00e9s sous forme d&rsquo;extrait CSS, de PNG ou vous pouvez <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/wordpress\/\" title=\"t\u00e9l\u00e9charger\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"6112\">t\u00e9l\u00e9charger<\/a> l&rsquo;ensemble complet de 180 d\u00e9grad\u00e9s pour Sketch ou Photoshop (si c&rsquo;est l\u00e0 que vous effectuez votre conception).<\/p>\n<p><a href=\"https:\/\/www.grabient.com\/\" target=\"_blank\" rel=\"noopener\">Grabient<\/a> est un autre outil gratuit qui propose de nombreux d\u00e9grad\u00e9s de couleurs pr\u00e9d\u00e9finis. Cependant, vous avez un peu plus de contr\u00f4le sur le r\u00e9sultat de votre d\u00e9grad\u00e9 : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6a9dcf elementor-widget elementor-widget-image\" data-id=\"e6a9dcf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=409\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator-1024x523.jpg\" class=\"attachment-large size-large wp-image-105935\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator-1024x523.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator-300x153.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator-768x392.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1425\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator.jpg 1425w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2e6dd2 elementor-widget elementor-widget-text-editor\" data-id=\"d2e6dd2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vous pouvez modifier la rotation du d\u00e9grad\u00e9, ajouter ou supprimer des couleurs et personnaliser les pourcentages de couleurs.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdd2a9f elementor-widget elementor-widget-heading\" data-id=\"cdd2a9f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Option 3 : Cr\u00e9er des d\u00e9grad\u00e9s dans Elementor<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14e30c1 elementor-widget elementor-widget-text-editor\" data-id=\"14e30c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Si vous pr\u00e9f\u00e9rez travailler directement dans WordPress, vous pouvez facilement le faire avec <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"Elementor\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"1195\">Elementor<\/a>.<\/p>\n<p>Pour commencer, vous pouvez facilement <a href=\"https:\/\/elementor.com\/blog\/v120-background-gradient\/\" target=\"_blank\" rel=\"noopener\">d\u00e9finir des d\u00e9grad\u00e9s de couleurs comme arri\u00e8re-plan<\/a> :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07dc92a elementor-widget elementor-widget-video\" data-id=\"07dc92a\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=q9YQupQt5zs&amp;t=1s&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36f2ec7 elementor-widget elementor-widget-text-editor\" data-id=\"36f2ec7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vous pouvez \u00e9galement <a href=\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\" target=\"_blank\" rel=\"noopener\">ajouter des effets de filtre \u00e0 vos images et vid\u00e9os<\/a> avec Elementor. Vous avez un contr\u00f4le total sur l&rsquo;apparence de vos d\u00e9grad\u00e9s depuis le panneau Style : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbfed9e elementor-widget elementor-widget-video\" data-id=\"cbfed9e\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/15-elementor-gradient-editor.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad4cb6a elementor-widget elementor-widget-text-editor\" data-id=\"ad4cb6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ce ne sont pas seulement les composants plus importants de votre site internet auxquels vous pouvez ajouter des d\u00e9grad\u00e9s. Vous pouvez \u00e9galement ajouter des d\u00e9grad\u00e9s \u00e0 des \u00e9l\u00e9ments plus petits comme les boutons :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcfc1a0 elementor-widget elementor-widget-video\" data-id=\"dcfc1a0\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=5z1uM4azviE&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8dd789e elementor-widget elementor-widget-text-editor\" data-id=\"8dd789e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les d\u00e9grad\u00e9s de couleurs sont garantis d&rsquo;attirer l&rsquo;attention o\u00f9 qu&rsquo;ils soient utilis\u00e9s, il est donc tout \u00e0 fait logique de les utiliser lors de la conception de votre appel \u00e0 l&rsquo;action.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dac88b8 elementor-widget elementor-widget-menu-anchor\" data-id=\"dac88b8\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"conseils-de-conception-de-degrades\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c63060 elementor-widget elementor-widget-heading\" data-id=\"9c63060\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conseils de conception de d\u00e9grad\u00e9s\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4cae24c elementor-widget elementor-widget-text-editor\" data-id=\"4cae24c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tout comme la palette de couleurs d&rsquo;un site internet, vous devriez accorder beaucoup d&rsquo;attention \u00e0 vos d\u00e9grad\u00e9s de couleurs. Voici quelques conseils \u00e0 garder \u00e0 l&rsquo;esprit : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83c295d elementor-widget elementor-widget-heading\" data-id=\"83c295d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Ajoutez une troisi\u00e8me couleur \u00e0 vos d\u00e9grad\u00e9s pour \u00e9viter un milieu gris\u00e2tre<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60d7d15 elementor-widget elementor-widget-text-editor\" data-id=\"60d7d15\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Si vous souhaitez concevoir un d\u00e9grad\u00e9 attrayant, vous aurez besoin de plus de deux couleurs pour cela : <\/p>\n<ul>\n<li>Une pour un &lt;c\u00f4t\u00e9 ou un coin&gt;<\/li>\n<li>Une pour l'&lt;arr\u00eat de couleur lin\u00e9aire&gt;<\/li>\n<li>Une pour l&rsquo;autre &lt;c\u00f4t\u00e9 ou coin&gt;<\/li>\n<\/ul>\n<p>Si vous ne d\u00e9finissez pas un &lt;arr\u00eat de couleur lin\u00e9aire&gt;, il est possible que le d\u00e9grad\u00e9 ne se fasse pas aussi harmonieusement et vous vous retrouverez avec une couleur gris\u00e2tre entre les deux. Comme ceci : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9387ab elementor-widget elementor-widget-image\" data-id=\"b9387ab\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient-1024x561.jpg\" class=\"attachment-large size-large wp-image-105936\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83f08cb elementor-widget elementor-widget-text-editor\" data-id=\"83f08cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>En d\u00e9finissant une valeur de couleur entre les deux valeurs de &lt;c\u00f4t\u00e9 ou coin&gt;, vous pouvez \u00e9viter que cela ne se produise. Voici une fa\u00e7on de le corriger : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da33efc elementor-widget elementor-widget-image\" data-id=\"da33efc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"495\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=495\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-1024x633.jpg\" class=\"attachment-large size-large wp-image-105918\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-1024x633.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-300x186.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-768x475.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-1536x950.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-2048x1266.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a90955e elementor-widget elementor-widget-text-editor\" data-id=\"a90955e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Si vous souhaitez cr\u00e9er un \u00e9chantillon vibrant de couleur, la troisi\u00e8me valeur chromatique constitue une solution ais\u00e9e \u00e0 cette probl\u00e9matique. Si vous pr\u00e9f\u00e9rez maintenir le d\u00e9grad\u00e9 plus subtil, essayez de trouver des valeurs chromatiques qui pr\u00e9sentent des similitudes entre elles. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6991523 elementor-widget elementor-widget-heading\" data-id=\"6991523\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. S\u00e9lectionnez une couleur principale qui transmet les signaux appropri\u00e9s<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80a7a68 elementor-widget elementor-widget-text-editor\" data-id=\"80a7a68\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Bien que vous cr\u00e9iez un effet chromatique unique avec un d\u00e9grad\u00e9, cela ne signifie pas que la <a href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\" target=\"_blank\" rel=\"noopener\">th\u00e9orie des couleurs<\/a> puisse \u00eatre n\u00e9glig\u00e9e. Assurez-vous de choisir une couleur principale qui \u00e9tablit l&rsquo;ambiance ad\u00e9quate et v\u00e9hicule les \u00e9motions appropri\u00e9es. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b333425 elementor-widget elementor-widget-heading\" data-id=\"b333425\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Permettez le contraste chromatique, mais \u00e9vitez le conflit<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1232628 elementor-widget elementor-widget-text-editor\" data-id=\"1232628\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Il existe une diff\u00e9rence significative entre les <a href=\"https:\/\/elementor.com\/blog\/contrast-web-design\/\" target=\"_blank\" rel=\"noopener\">couleurs qui contrastent<\/a> entre elles et celles qui ne s&rsquo;harmonisent tout simplement pas. <\/p>\n<p>Utilisez <a href=\"https:\/\/www.canva.com\/colors\/color-wheel\/\" target=\"_blank\" rel=\"noopener\">l&rsquo;outil de roue chromatique de Canva<\/a> pour explorer des options viables :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-818f08e elementor-widget elementor-widget-video\" data-id=\"818f08e\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/18-canva-color-wheel.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a31abe6 elementor-widget elementor-widget-text-editor\" data-id=\"a31abe6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>D\u00e9finissez votre couleur principale dans le premier champ. Ensuite, utilisez le g\u00e9n\u00e9rateur de combinaisons chromatiques pour explorer les associations de couleurs pour votre d\u00e9grad\u00e9.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-483ad6d elementor-widget elementor-widget-heading\" data-id=\"483ad6d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Ayez toujours conscience de l'emplacement de votre source lumineuse<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9e766a elementor-widget elementor-widget-text-editor\" data-id=\"b9e766a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>M\u00eame si votre d\u00e9grad\u00e9 appara\u00eet plus surr\u00e9aliste que naturel, vous devez le concevoir en tenant compte d&rsquo;une source lumineuse. La direction de provenance de la source lumineuse dictera le type de d\u00e9grad\u00e9 que vous utiliserez (lin\u00e9aire ou radial) et la luminosit\u00e9 de l&rsquo;extr\u00e9mit\u00e9 la plus claire du d\u00e9grad\u00e9. <\/p>\n<p>Par exemple, la page <a href=\"https:\/\/readymag.com\/u18071539\/934962\/\" target=\"_blank\" rel=\"noopener\">EMBA for Eurasia<\/a> pr\u00e9sente une source lumineuse distincte provenant du c\u00f4t\u00e9 droit : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9818c2d elementor-widget elementor-widget-image\" data-id=\"9818c2d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light-1024x561.jpg\" class=\"attachment-large size-large wp-image-105937\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5817b6f elementor-widget elementor-widget-text-editor\" data-id=\"5817b6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Cette conception de d\u00e9grad\u00e9 ressemble au type de d\u00e9grad\u00e9s que nous observerions lors du lever ou du coucher du soleil sur un paysage magnifique.<\/p>\n<p>Vous pouvez \u00e9galement utiliser la directionnalit\u00e9 du d\u00e9grad\u00e9 pour guider les visiteurs plus efficacement \u00e0 travers la page et vers ses parties les plus importantes \u2014 qui devraient se situer \u00e0 l&rsquo;extr\u00e9mit\u00e9 la plus claire. <\/p>\n<p>Le site web <a href=\"https:\/\/orson.ai\/\" target=\"_blank\" rel=\"noopener\">Orson<\/a> en offre un exemple int\u00e9ressant :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9283e6a elementor-widget elementor-widget-video\" data-id=\"9283e6a\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/orson-hero-gradient-design.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56eeb73 elementor-widget elementor-widget-text-editor\" data-id=\"56eeb73\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>L&rsquo;orbe de d\u00e9grad\u00e9 anim\u00e9 accomplit ici plusieurs fonctions. La premi\u00e8re est de mettre v\u00e9ritablement en \u00e9vidence le message principal de \u00ab\u00a0Building Trust\u00a0\u00bb. La seconde est que les zones plus claires, associ\u00e9es \u00e0 l&rsquo;animation, conf\u00e8rent \u00e0 ce site une atmosph\u00e8re \u00e9nergis\u00e9e, ce qui devrait inciter les visiteurs \u00e0 poursuivre leur exploration pour d\u00e9couvrir ce qui les attend. <\/p>\n<p>Vous pouvez \u00e9galement utiliser <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noopener\">le principe de design<\/a> de hi\u00e9rarchie visuelle pour modifier la proportion de lumi\u00e8re par rapport \u00e0 l&rsquo;obscurit\u00e9 le long du d\u00e9grad\u00e9 afin de montrer indirectement aux visiteurs o\u00f9 concentrer leur attention.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb723a7 elementor-widget elementor-widget-heading\" data-id=\"fb723a7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Soyez vigilant concernant le ph\u00e9nom\u00e8ne de banding<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe317aa elementor-widget elementor-widget-text-editor\" data-id=\"fe317aa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les bandings sont des lignes qui apparaissent au sein des d\u00e9grad\u00e9s de couleurs. Ainsi, plut\u00f4t que d&rsquo;observer une transition fluide d&rsquo;une couleur \u00e0 l&rsquo;autre, les visiteurs percevront une d\u00e9limitation subtile entre les valeurs chromatiques. <\/p>\n<p>Voici un exemple : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d7f941 elementor-widget elementor-widget-image\" data-id=\"0d7f941\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"273\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=273\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding-1024x349.png\" class=\"attachment-large size-large wp-image-105919\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding-1024x349.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding-300x102.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding-768x262.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1115\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding.png 1115w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe0a561 elementor-widget elementor-widget-text-editor\" data-id=\"fe0a561\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Cela se produit lorsqu&rsquo;il n&rsquo;y a pas suffisamment de valeurs chromatiques pour remplir compl\u00e8tement le d\u00e9grad\u00e9. Il existe plusieurs raisons \u00e0 ce ph\u00e9nom\u00e8ne. <\/p>\n<p>Tout d&rsquo;abord, la profondeur de bits de l&rsquo;image peut \u00eatre insuffisante. C&rsquo;est \u00e9galement un ph\u00e9nom\u00e8ne plus fr\u00e9quent avec les images de grande taille. Cela s&rsquo;explique par le fait que les grandes images cr\u00e9ent une distance trop importante entre les deux couleurs pour couvrir harmonieusement l&rsquo;espace entre elles. Et si le contraste entre vos couleurs est tr\u00e8s prononc\u00e9, vous \u00eates plus susceptible de l&rsquo;observer \u00e9galement.<\/p>\n<p>Si vous rencontrez des difficult\u00e9s avec le banding, utilisez votre logiciel d&rsquo;\u00e9dition d&rsquo;images pour tenter d&rsquo;att\u00e9nuer ces bandes \u00e0 l&rsquo;aide des param\u00e8tres de bruit et de tramage. Ou vous pourriez simplement devoir exp\u00e9rimenter avec d&rsquo;autres couleurs.<\/p>\n<p>Voici ce qui se produit lorsque le d\u00e9grad\u00e9 ci-dessus utilise des couleurs plus analogues tout au long : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fa245f elementor-widget elementor-widget-image\" data-id=\"0fa245f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"272\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=272\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding-1024x348.png\" class=\"attachment-large size-large wp-image-105920\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding-1024x348.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding-300x102.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding-768x261.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1111\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding.png 1111w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14fe51c elementor-widget elementor-widget-text-editor\" data-id=\"14fe51c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>La majorit\u00e9 du banding a maintenant disparu de cet \u00e9chantillon de couleur. Bien que cette palette ne soit peut-\u00eatre pas la plus vibrante, elle ne conf\u00e8re plus au d\u00e9grad\u00e9 un aspect aussi artificiel. <\/p>\n<p>Examinons un exemple concret de la mani\u00e8re de proc\u00e9der. Celui-ci provient de <a href=\"https:\/\/ur-bureau.com\/\" target=\"_blank\" rel=\"noopener\">UR Bureau<\/a> et illustre comment vous pouvez rendre un d\u00e9grad\u00e9 vibrant sans recourir \u00e0 des associations de couleurs extr\u00eames : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89df712 elementor-widget elementor-widget-image\" data-id=\"89df712\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient-1024x561.png\" class=\"attachment-large size-large wp-image-105921\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient-1024x561.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient-300x164.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient-768x421.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient.png 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d3e456 elementor-widget elementor-widget-text-editor\" data-id=\"2d3e456\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Gardez \u00e0 l&rsquo;esprit qu&rsquo;il ne s&rsquo;agit pas d&rsquo;une r\u00e8gle absolue \u00e0 suivre. De nombreux concepteurs web utilisent des d\u00e9grad\u00e9s extr\u00eames sans rencontrer le probl\u00e8me de banding. Souvent, le flou est utilis\u00e9 et les d\u00e9grad\u00e9s adoptent un aspect plus proche du style bokeh. <\/p>\n<p>Voici un tel exemple de <a href=\"https:\/\/www.virgileguinard.fr\/\" target=\"_blank\" rel=\"noopener\">Virgile Guinard<\/a> : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f530a2a elementor-widget elementor-widget-image\" data-id=\"f530a2a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design-1024x561.png\" class=\"attachment-large size-large wp-image-105922\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design-1024x561.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design-300x164.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design-768x421.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design.png 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec660e6 elementor-widget elementor-widget-text-editor\" data-id=\"ec660e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Et un autre de <a href=\"https:\/\/jemima.work\/Info\" target=\"_blank\" rel=\"noopener\">la graphiste Jemima<\/a> : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3332f65 elementor-widget elementor-widget-image\" data-id=\"3332f65\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background-1024x561.jpg\" class=\"attachment-large size-large wp-image-105923\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebd6fc6 elementor-widget elementor-widget-text-editor\" data-id=\"ebd6fc6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Il s&rsquo;agit d&rsquo;un choix de design que nous commen\u00e7ons \u00e0 observer plus fr\u00e9quemment sur les sites web de cr\u00e9atifs. Dans la mesure o\u00f9 elles ne compromettent pas l&rsquo;aspect des portfolios des artistes, ces d\u00e9cisions en rupture avec les conventions peuvent s&rsquo;av\u00e9rer particuli\u00e8rement efficaces. <\/p>\n<p><a href=\"https:\/\/zeusjones.com\/\" target=\"_blank\" rel=\"noopener\">Zeus Jones<\/a> est une agence cr\u00e9ative qui a opt\u00e9 pour des d\u00e9grad\u00e9s repoussant les limites. Ce fond anim\u00e9 n&rsquo;appara\u00eet qu&rsquo;en haut de la page d&rsquo;accueil :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b9a594 elementor-widget elementor-widget-video\" data-id=\"7b9a594\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/zeus-jones-gradient-hero.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02b7b72 elementor-widget elementor-widget-text-editor\" data-id=\"02b7b72\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Le reste du site utilise des couleurs de fond unies et contrast\u00e9es pour garantir que le travail et les messages restent exempts de distractions.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58aa7c4 elementor-widget elementor-widget-menu-anchor\" data-id=\"58aa7c4\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"tendances-des-degrades-en-conception-web\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbcf290 elementor-widget elementor-widget-heading\" data-id=\"fbcf290\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">6. Exemples de d\u00e9grad\u00e9s remarquables en conception web\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a877d0 elementor-widget elementor-widget-text-editor\" data-id=\"3a877d0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Il existe de nombreuses fa\u00e7ons dont les concepteurs utilisent actuellement les d\u00e9grad\u00e9s sur le web. Examinons certaines des tendances les plus populaires : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cee42a6 elementor-widget elementor-widget-heading\" data-id=\"cee42a6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. D\u00e9grad\u00e9s doux et subtils \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc7ef45 elementor-widget elementor-widget-video\" data-id=\"dc7ef45\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/21-recess-homepage-gradient-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03f1942 elementor-widget elementor-widget-text-editor\" data-id=\"03f1942\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>La page d&rsquo;accueil de <a href=\"https:\/\/takearecess.com\/\" target=\"_blank\" rel=\"noopener\">Recess<\/a> comporte plusieurs d\u00e9grad\u00e9s, mais celui sur lequel il convient de se concentrer appara\u00eet environ \u00e0 mi-chemin de la page. Le fond de ciel bleu se transforme lentement en rose. Lorsque les visiteurs font d\u00e9filer la page pour lire le contenu et examiner les graphiques, ils pourraient ne m\u00eame pas remarquer la transition jusqu&rsquo;\u00e0 ce que le fond soit devenu un rose beaucoup plus fonc\u00e9. <\/p>\n<p><a href=\"https:\/\/foundation.gucci.com\/\" target=\"_blank\" rel=\"noopener\">Gucci Beauty<\/a> est un autre bel exemple de d\u00e9grad\u00e9s doux en action : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbcb4a0 elementor-widget elementor-widget-video\" data-id=\"dbcb4a0\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/gucci-beauty-gradient-background.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b525de elementor-widget elementor-widget-text-editor\" data-id=\"2b525de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Celui-ci, cependant, ne n\u00e9cessite pas que les visiteurs fassent d\u00e9filer la page pour appr\u00e9cier cette d\u00e9lectation visuelle. Le fond rotatif de d\u00e9grad\u00e9s doux se situe au-dessus de la ligne de flottaison.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0b6a44 elementor-widget elementor-widget-heading\" data-id=\"d0b6a44\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Fonds en d\u00e9grad\u00e9 multicolore\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-940b6cd elementor-widget elementor-widget-text-editor\" data-id=\"940b6cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Le <a href=\"https:\/\/www.kikk.be\/2021\/\" target=\"_blank\" rel=\"noopener\">Festival KIKK<\/a> dispose toujours d&rsquo;un site web extravagant pour promouvoir sa conf\u00e9rence annuelle. Celui-ci est un bon exemple de la fa\u00e7on de jouer avec de nombreuses couleurs dans un seul d\u00e9grad\u00e9 sans que cela ne devienne accablant. R\u00e9parti sur toute la longueur de la page d&rsquo;accueil, les couleurs passent lentement de l&rsquo;une \u00e0 l&rsquo;autre. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eebcc34 elementor-widget elementor-widget-heading\" data-id=\"eebcc34\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Effets de d\u00e9grad\u00e9 am\u00e9liorant l'humeur<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1af5c0b elementor-widget elementor-widget-video\" data-id=\"1af5c0b\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/25-airoceancargo-music-gradient.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd3e32d elementor-widget elementor-widget-text-editor\" data-id=\"dd3e32d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.airoceancargo.com\/it\/\" target=\"_blank\" rel=\"noopener\">Air Ocean Cargo<\/a> est un exemple vraiment int\u00e9ressant. Son message est similaire \u00e0 celui de Recess en ce qu&rsquo;il invite les visiteurs \u00e0 \u00ab Se d\u00e9tendre \u00bb. Cependant, son utilisation des d\u00e9grad\u00e9s est radicalement diff\u00e9rente. <\/p>\n<p>Dans ce cas, nous voyons un d\u00e9grad\u00e9 radial se d\u00e9placer au rythme entra\u00eenant et accrocheur de la musique jou\u00e9e sur le site. Il changera de couleur si le visiteur change de chanson depuis le contr\u00f4leur en haut \u00e0 droite. Puis, lorsque le visiteur met la musique en pause, le d\u00e9grad\u00e9 prend la forme d&rsquo;un doux halo.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4842f11 elementor-widget elementor-widget-heading\" data-id=\"4842f11\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. D\u00e9grad\u00e9s 3D\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88a8465 elementor-widget elementor-widget-video\" data-id=\"88a8465\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/23-juliebonnemoy-portfolio-gradients.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8b33af elementor-widget elementor-widget-text-editor\" data-id=\"e8b33af\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Le <a href=\"https:\/\/juliebonnemoy.com\/\" target=\"_blank\" rel=\"noopener\">portfolio de design freelance de Julie Bonnemoy<\/a> pr\u00e9sente un effet rappelant une lampe \u00e0 lave comme \u00e9l\u00e9ment graphique principal. Les formes 3D flottent autour de la section, r\u00e9v\u00e9lant occasionnellement le message de bienvenue de Julie aux visiteurs. Le design du d\u00e9grad\u00e9 iridescent est certainement captivant et suscite la curiosit\u00e9 quant aux autres spectacles que son portfolio r\u00e9serve.<\/p>\n<p><a href=\"http:\/\/adova-group.com\/\" target=\"_blank\" rel=\"noopener\">The Adova Group<\/a> a pour mission d&rsquo;aider les gens \u00e0 se d\u00e9tendre (dans ce cas, \u00e0 mieux dormir). C&rsquo;est une tendance \u00e0 noter si vous concevez un site pour une marque ayant une mission similaire. Il existe clairement une corr\u00e9lation entre l&rsquo;id\u00e9e de relaxation et l&rsquo;aspect visuel des d\u00e9grad\u00e9s :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a53739b elementor-widget elementor-widget-video\" data-id=\"a53739b\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/24-adovagroup-surreal-gradient-landscape.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad7000c elementor-widget elementor-widget-text-editor\" data-id=\"ad7000c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>M\u00eame si vous concevez un site web pour quelqu&rsquo;un qui n&rsquo;est pas dans le domaine de la sant\u00e9 et du bien-\u00eatre, vous pouvez toujours vous inspirer de ce paysage 3D surr\u00e9aliste. Observez ce qui arrive \u00e0 la sph\u00e8re \u00e0 la fin de ce GIF. Le design en d\u00e9grad\u00e9 conf\u00e8re \u00e0 cet \u00e9l\u00e9ment de visualisation de donn\u00e9es un aspect 3D. C&rsquo;est en soi un concept int\u00e9ressant qui peut \u00eatre appliqu\u00e9 \u00e0 une vari\u00e9t\u00e9 de sites web.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f7b3b2 elementor-widget elementor-widget-heading\" data-id=\"9f7b3b2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. D\u00e9grad\u00e9s sur les images de site web<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b399550 elementor-widget elementor-widget-text-editor\" data-id=\"b399550\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Il n&rsquo;est pas toujours ais\u00e9 de trouver la photo brute parfaite pour un site web. Heureusement, nous disposons de nombreux outils qui facilitent l&rsquo;ajustement de la couleur de nos images ou l&rsquo;ajout de filtres pour qu&rsquo;elles transmettent exactement l&rsquo;apparence et l&rsquo;ambiance dont nous avons besoin. <\/p>\n<p>Lors du choix des filtres de couleur, envisagez d&rsquo;appliquer un filtre en d\u00e9grad\u00e9 comme le fait <a href=\"https:\/\/landing.adobe.com\/en\/na\/products\/marketing-cloud\/ctir-3108-running-on-experience\/index.html\" target=\"_blank\" rel=\"noopener\">Adobe<\/a> ici : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ca2bf6 elementor-widget elementor-widget-image\" data-id=\"9ca2bf6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience-1024x561.jpg\" class=\"attachment-large size-large wp-image-105924\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-717a6cb elementor-widget elementor-widget-text-editor\" data-id=\"717a6cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>La <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/landing-page-builder\/\" title=\"page de destination\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"2493\">page de destination<\/a> Running on Experience comporte plusieurs filtres d&rsquo;image en d\u00e9grad\u00e9 comme celui-ci. Voici un autre exemple : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b3875c elementor-widget elementor-widget-image\" data-id=\"0b3875c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess-1024x561.jpg\" class=\"attachment-large size-large wp-image-105925\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d358608 elementor-widget elementor-widget-text-editor\" data-id=\"d358608\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ces d\u00e9grad\u00e9s d&rsquo;image sont int\u00e9ressants car ils ne sont pas le m\u00e9lange typique d&rsquo;une couleur \u00e0 une autre. Seul le sujet de la photo est baign\u00e9 dans un filtre en d\u00e9grad\u00e9. <\/p>\n<p>\u00c9tant donn\u00e9 que ce rapport traite de la transformation, le filtre en d\u00e9grad\u00e9 fonctionne presque comme une repr\u00e9sentation symbolique de la transformation que le sujet subit. Ce n&rsquo;est que dans la derni\u00e8re image que nous la voyons compl\u00e8tement lib\u00e9r\u00e9e de tout filtre ou d\u00e9grad\u00e9. <\/p>\n<p>Une autre mani\u00e8re d&rsquo;exp\u00e9rimenter avec les d\u00e9grad\u00e9s sur les images consiste \u00e0 utiliser un filtre de couleur unique et \u00e0 l&rsquo;estomper progressivement. Cela transforme essentiellement les c\u00f4t\u00e9s transparent et opaque du filtre en deux couleurs distinctes. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a0c7a4 elementor-widget elementor-widget-heading\" data-id=\"6a0c7a4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. D\u00e9grad\u00e9s des boutons d'appel \u00e0 l'action\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-addf362 elementor-widget elementor-widget-text-editor\" data-id=\"addf362\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Le site web <a href=\"https:\/\/www.jlobeauty.com\/\" target=\"_blank\" rel=\"noopener\">JLo Beauty<\/a> est rempli d&rsquo;\u00e9clats iris\u00e9s, depuis ses graphiques d&rsquo;arri\u00e8re-plan jusqu&rsquo;\u00e0 ses photographies de produits. Les boutons ne diff\u00e8rent pas en termes de style, mais ils se distinguent par leur r\u00e9action au contact des visiteurs :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38de13f elementor-widget elementor-widget-video\" data-id=\"38de13f\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/29-jlobeauty-gradient-buttons.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37e5f74 elementor-widget elementor-widget-text-editor\" data-id=\"37e5f74\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Lorsqu&rsquo;un utilisateur survole l&rsquo;un des boutons \u00ab\u00a0Ajouter au panier\u00a0\u00bb, le d\u00e9grad\u00e9 de couleurs s&rsquo;anime pendant un bref instant. <\/p>\n<p>Il n&rsquo;est pas n\u00e9cessaire d&rsquo;appliquer un d\u00e9grad\u00e9 \u00e0 l&rsquo;int\u00e9gralit\u00e9 de la conception du bouton si vous ne le souhaitez pas. <a href=\"https:\/\/wearecroma.it\/\" target=\"_blank\" rel=\"noopener\">Croma<\/a>, par exemple, utilise les d\u00e9grad\u00e9s de mani\u00e8re strat\u00e9gique sur son site. L&rsquo;une des utilisations consiste \u00e0 cr\u00e9er une animation de bouton d\u00e9clench\u00e9e par le survol : <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b666337 elementor-widget elementor-widget-video\" data-id=\"b666337\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/croma-button-gradients.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c807c3 elementor-widget elementor-widget-text-editor\" data-id=\"9c807c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Lorsque l&rsquo;utilisateur survole chacune des cases ou boutons cliquables, une bordure en d\u00e9grad\u00e9 appara\u00eet. Ce m\u00eame type d&rsquo;effet de confirmation au survol serait utile dans la navigation.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d11fa0 elementor-widget elementor-widget-heading\" data-id=\"2d11fa0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Images avec d\u00e9grad\u00e9s naturels\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db0004d elementor-widget elementor-widget-text-editor\" data-id=\"db0004d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Les d\u00e9grad\u00e9s se produisent naturellement dans notre environnement. Il suffit d&rsquo;observer le ciel ou l&rsquo;oc\u00e9an pour s&rsquo;en rendre compte. Lors de la s\u00e9lection d&rsquo;images pour votre site, envisagez d&rsquo;int\u00e9grer leurs propres d\u00e9grad\u00e9s dans votre conception, comme l&rsquo;a fait <a href=\"https:\/\/www.honesttea.com\/\" target=\"_blank\" rel=\"noopener\">Honest Tea<\/a> ici. Cela cr\u00e9e un effet v\u00e9ritablement unique qui surprendra certainement de nombreux visiteurs (de mani\u00e8re positive).<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7fe628 elementor-widget elementor-widget-video\" data-id=\"a7fe628\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/31-honesttea-image-with-gradient-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d7ae0c elementor-widget elementor-widget-heading\" data-id=\"5d7ae0c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Utilisez les d\u00e9grad\u00e9s pour cr\u00e9er une exp\u00e9rience captivante<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-294bd8c elementor-widget elementor-widget-text-editor\" data-id=\"294bd8c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Si vous recherchez une fa\u00e7on amusante et originale de donner vie aux sites web de vos clients, les d\u00e9grad\u00e9s de couleurs pourraient \u00eatre la tendance de design web \u00e0 essayer cette ann\u00e9e. Non seulement ils rendent les couleurs autrement plates et unies plus vibrantes et attrayantes \u00e0 regarder, mais ils sont \u00e9galement utiles pour focaliser l&rsquo;attention et am\u00e9liorer l&rsquo;engagement. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Si vous recherchez une fa\u00e7on amusante et originale de donner vie aux sites web de vos clients, les d\u00e9grad\u00e9s de couleurs pourraient \u00eatre la tendance de design web \u00e0 essayer cette ann\u00e9e. Dans cet article, nous discuterons de l&rsquo;utilisation des d\u00e9grad\u00e9s et vous fournirons des conseils ainsi que des exemples inspirants.<\/p>\n","protected":false},"author":2024198,"featured_media":105911,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[248,234,232],"tags":[244],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-125066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-fr","category-inspiration-fr","category-lequipe-elementor-ecrit-fr","tag-construire"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web &amp; 6 Exemples \u00c9poustouflants | Elementor<\/title>\n<meta name=\"description\" content=\"La couleur est une partie int\u00e9grante de la conception web. Cependant, plut\u00f4t que de s&#039;appuyer strictement sur des couleurs unies et des filtres, ce guide vous pr\u00e9sentera les d\u00e9grad\u00e9s de couleurs et la mani\u00e8re de les incorporer dans la conception web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web &amp; 6 Exemples \u00c9poustouflants | Elementor\" \/>\n<meta property=\"og:description\" content=\"La couleur est une partie int\u00e9grante de la conception web. Cependant, plut\u00f4t que de s&#039;appuyer strictement sur des couleurs unies et des filtres, ce guide vous pr\u00e9sentera les d\u00e9grad\u00e9s de couleurs et la mani\u00e8re de les incorporer dans la conception web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-23T11:51:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-06.png\" \/>\n<meta name=\"author\" content=\"Shely Vaisman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shely Vaisman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/\"},\"author\":{\"name\":\"Shely Vaisman\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7\"},\"headline\":\"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web : Tendances &amp; Exemples\",\"datePublished\":\"2021-09-23T11:51:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/\"},\"wordCount\":4381,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"keywords\":[\"Construire\"],\"articleSection\":[\"Design\",\"Inspiration\",\"L\u2019\u00e9quipe Elementor \u00e9crit\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/\",\"name\":\"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web & 6 Exemples \u00c9poustouflants | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"datePublished\":\"2021-09-23T11:51:00+00:00\",\"description\":\"La couleur est une partie int\u00e9grante de la conception web. Cependant, plut\u00f4t que de s'appuyer strictement sur des couleurs unies et des filtres, ce guide vous pr\u00e9sentera les d\u00e9grad\u00e9s de couleurs et la mani\u00e8re de les incorporer dans la conception web.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"width\":1201,\"height\":629},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design\",\"item\":\"https:\/\/elementor.com\/blog\/fr\/category\/design-fr\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web : Tendances &amp; Exemples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7\",\"name\":\"Shely Vaisman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d28365ea985a0b0097d34c9bded809f448e5c7b935b281f6f06b715165d1f90f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d28365ea985a0b0097d34c9bded809f448e5c7b935b281f6f06b715165d1f90f?s=96&d=mm&r=g\",\"caption\":\"Shely Vaisman\"},\"description\":\"Shely is a Web Designer at Elementor. When she\u2019s not obsessing over illustration and UI design, you can find her practicing Yoga and listening to music.\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/author\/shelyv\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web & 6 Exemples \u00c9poustouflants | Elementor","description":"La couleur est une partie int\u00e9grante de la conception web. Cependant, plut\u00f4t que de s'appuyer strictement sur des couleurs unies et des filtres, ce guide vous pr\u00e9sentera les d\u00e9grad\u00e9s de couleurs et la mani\u00e8re de les incorporer dans la conception web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web & 6 Exemples \u00c9poustouflants | Elementor","og_description":"La couleur est une partie int\u00e9grante de la conception web. Cependant, plut\u00f4t que de s'appuyer strictement sur des couleurs unies et des filtres, ce guide vous pr\u00e9sentera les d\u00e9grad\u00e9s de couleurs et la mani\u00e8re de les incorporer dans la conception web.","og_url":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-09-23T11:51:00+00:00","og_image":[{"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-06.png","type":"","width":"","height":""}],"author":"Shely Vaisman","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"\u00c9crit par":"Shely Vaisman","Dur\u00e9e de lecture estim\u00e9e":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/"},"author":{"name":"Shely Vaisman","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7"},"headline":"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web : Tendances &amp; Exemples","datePublished":"2021-09-23T11:51:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/"},"wordCount":4381,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","keywords":["Construire"],"articleSection":["Design","Inspiration","L\u2019\u00e9quipe Elementor \u00e9crit"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/","url":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/","name":"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web & 6 Exemples \u00c9poustouflants | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","datePublished":"2021-09-23T11:51:00+00:00","description":"La couleur est une partie int\u00e9grante de la conception web. Cependant, plut\u00f4t que de s'appuyer strictement sur des couleurs unies et des filtres, ce guide vous pr\u00e9sentera les d\u00e9grad\u00e9s de couleurs et la mani\u00e8re de les incorporer dans la conception web.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","width":1201,"height":629},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-les-degrades-dans-la-conception-web-tendances-exemples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Design","item":"https:\/\/elementor.com\/blog\/fr\/category\/design-fr\/"},{"@type":"ListItem","position":3,"name":"Comment Utiliser les D\u00e9grad\u00e9s dans la Conception Web : Tendances &amp; Exemples"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/fr\/#website","url":"https:\/\/elementor.com\/blog\/fr\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/fr\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7","name":"Shely Vaisman","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d28365ea985a0b0097d34c9bded809f448e5c7b935b281f6f06b715165d1f90f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d28365ea985a0b0097d34c9bded809f448e5c7b935b281f6f06b715165d1f90f?s=96&d=mm&r=g","caption":"Shely Vaisman"},"description":"Shely is a Web Designer at Elementor. When she\u2019s not obsessing over illustration and UI design, you can find her practicing Yoga and listening to music.","url":"https:\/\/elementor.com\/blog\/fr\/author\/shelyv\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/125066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/users\/2024198"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=125066"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/125066\/revisions"}],"predecessor-version":[{"id":125069,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/125066\/revisions\/125069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/media\/105911"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=125066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=125066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=125066"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/marketing_persona?post=125066"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/marketing_intent?post=125066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}