{"id":77550,"date":"2021-09-23T11:51:00","date_gmt":"2021-09-23T11:51:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=77550"},"modified":"2021-09-23T11:51:00","modified_gmt":"2021-09-23T11:51:00","slug":"gradients-in-web-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/","title":{"rendered":"How To Use Gradients in Web Design: Trends &amp; Examples"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"77550\" class=\"elementor 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>Color gradients aren\u2019t new to web design. Remember <a href=\"https:\/\/elementor.com\/blog\/skeuomorphism-ux-design\/\">skeuomorphism<\/a>? We used gradients back then to give digital objects a 3D look.\u00a0<\/p><p>But as <a href=\"https:\/\/elementor.com\/blog\/minimalist-design\/\" target=\"_blank\" rel=\"noopener\">minimal<\/a> and <a href=\"https:\/\/elementor.com\/blog\/flat-design\/\" target=\"_blank\" rel=\"noopener\">flat design<\/a> took over the web in the 2010s, we saw gradients fall more and more by the wayside. It wasn\u2019t because they were outdated, it\u2019s just that designers didn\u2019t have much use for them with the current web design trends.\u00a0<\/p><p>It could be argued that Instagram\u2019s logo redesign in 2016 gave web design gradients a new lease on life. Once everyone saw what Instagram could do with color, it wasn\u2019t long before we started to see gradients popping up everywhere.\u00a0<\/p><p>Now here we are in 2021 and gradients are still alive and well. If you\u2019re curious about how to use them or just want a major dose of inspiration, keep reading.<\/p>\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\/\">Color Theory Fundamentals Every Web Designer Should Know<\/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 Of Contents<\/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\">What Are Gradients?<\/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\">Why Use Gradients In Web Design<\/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\">How To Create Gradients in Web Design<\/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\">Gradient Design Tips<\/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\">Web Design Gradient Trends &amp; Examples<\/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=\"what-are-color-gradients\"><\/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\">What Is A Gradient?\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\">A gradient is a gradual transition from one color to another. It allows designers to create almost a new color.&nbsp;<\/span><\/p><p><span style=\"font-weight: 400\">Gradients make objects stand out by adding a new dimension and realism to a design. Simply put, gradients add depth to an image.<\/span><\/p>\n<p>We can also refer to gradients as color <em>maps<\/em> since the <a href=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\" target=\"_blank\" rel=\"noopener\">color scheme<\/a> varies along the gradient as opposed to solid colors which only have one HEX code.<\/p>\n<p>This is an example of a <strong>linear or axial gradient<\/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-77610\" 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>This kind of gradient starts with two colors on opposite ends of the element. In this case, it\u2019s a lighter blue in the top-left corner and a darker blue in the bottom-right. The color smoothly transitions between the two.<\/p><p>This is an example of a <strong>radial gradient<\/strong>:\u00a0<\/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-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-77611\" 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>This kind of gradient also begins with two colors. However, the lighter green starts in the center of the graphic and radiates outwards until it becomes the darker green.\u00a0<\/p><p>We\u2019ve seen color gradients get used in everything. From products and packaging like <a href=\"https:\/\/www.zara.com\/\" target=\"_blank\" rel=\"noopener\">Zara<\/a>\u2019s line of perfumes:\u00a0<\/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-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>To hair color trends like the ones we\u2019ve seen on celebrities the last few years. Celebs like <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>, and <a href=\"https:\/\/www.instagram.com\/kyliejenner\/\" target=\"_blank\" rel=\"noopener\">Kylie Jenner<\/a> have all experimented with gradients:\u00a0<\/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-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-77567\" 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>The digital space is no stranger to the takeover of gradients either. App designers have been playing around with gradients for a while now. Back in 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> surprised everyone with its gradient redesign and now look at the state of our most popular products:<\/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-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-77568\" 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>Color gradients are a popular <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\" target=\"_blank\" rel=\"noopener\">web design trend<\/a> today and can be applied to a variety of elements on a website. For example:\u00a0<\/p><ul><li>Logos<\/li><li>Header elements<\/li><li>Backgrounds<\/li><li><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"Typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5410\">Typography<\/a><\/li><li>Icons<\/li><li>Photos<\/li><li>Buttons<\/li><\/ul><p>As we go through the rest of this post, we&#8217;ll look at numerous examples from brands that demonstrate some of the awesome things you can do with web design gradients.<\/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-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=\"why-use-gradients\"><\/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\">Why Use Gradients In Web Design\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>In recent years, there\u2019s been a resurgence in color gradients in web design. Similar to why <a href=\"https:\/\/elementor.com\/blog\/what-is-material-design\/\" target=\"_blank\" rel=\"noopener\">Material Design<\/a> and Flat Design 2.0 became popular, color gradients offer us a way to add more texture, depth, and excitement to a web page that\u2019s otherwise flat and lifeless.\u00a0<\/p><p>There are other reasons why we use gradients on websites:\u00a0<\/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-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\">To Create New Color Schemes\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>The general rule when choosing a color palette for a website is to select no more than two or three colors for it. But rather than use one color at a time, color gradients allow you to design with numerous colors at once.\u00a0<\/p><p>Take this example from <a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener\">Spotify<\/a>:\u00a0<\/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-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-77612\" 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>Rather than use a solid purple, blue or black background for the hero section, the designer uses a gradient effect to blend them all.<\/p><p>This isn\u2019t the only place Spotify uses gradients. Spotify\u2019s <a href=\"https:\/\/loudandclear.byspotify.com\/\" target=\"_blank\" rel=\"noopener\">Loud &amp; Clear report<\/a> is chock full of gradient backgrounds and animations:<\/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-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>This color palette choice brings a lot of life and fun to the Spotify brand wherever users and artists encounter it online.<\/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-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\">To Captivate Visitors<\/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>The look of a color gradient in and of itself can be quite captivating, even if the colors are subdued and the transition subtle. That said, gradients don\u2019t have to be static.\u00a0<\/p><p>Just look to the <a href=\"https:\/\/stripe.com\/\" target=\"_blank\" rel=\"noopener\">Stripe<\/a> website for an example of color gradients in motion:<\/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-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>There are a lot of colors in play here and, yet, it doesn\u2019t feel overdone. Instead, the almost lava-like way in which they blend into one another creates an effect that\u2019s impossible to miss.\u00a0<\/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-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\">To Help Visitors Focus Their 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>There are many ways in which you can grab a visitor\u2019s attention with web design. Color gradients happen to be very useful in this regard.\u00a0<\/p><p>Take this example from <a href=\"https:\/\/www.pepsi.com\/\" target=\"_blank\" rel=\"noopener\">Pepsi<\/a>:\u00a0<\/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-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-77613\" 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>Many areas of this home page contain solid shades of blue. But when visitors reach this point on the page, the radial gradient should force them to stop. It\u2019s not because of the gradient itself, but more because of the spotlight effect it creates around the Pepsi can.\u00a0<\/p><p>Linear gradients can also be used to direct attention. Typically, they\u2019re laid out directionally to help the visitors\u2019 eyes move the right way on the page.\u00a0<\/p><p><a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener\">Sketch<\/a> does this throughout its home page. Take this gradient-filled shape in the hero section:<\/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-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-77614\" 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>The lighter edges of the gradient are bound to get more attention than the darker interior. As visitors\u2019 eyes move towards the lighter edges, the right-facing arrowhead will further point them towards the site\u2019s introduction.\u00a0<\/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-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-77615\" 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>You also see the gradients lower down on the page. Again, the lighter areas of the blocks help users\u2019 eyes focus on the messages within them.<\/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-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\">To Make the Design More Memorable<\/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>Do you remember when Instagram redesigned its logo? It was a huge deal and had everyone talking about it (for both good and bad reasons), like <a href=\"https:\/\/medium.com\/look-and-logo\/rethinking-instagrams-redesign-beyond-the-glyph-and-gradient-619090c7128c\" target=\"_blank\" rel=\"noopener\">Matt Knorr on Medium<\/a>.<\/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-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-77575\" 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>It might not have been the best choice usability-wise, but it left a memorable impression on its users and this gradient design is one it\u2019s retained to this day.\u00a0<\/p><p><a href=\"https:\/\/www.amdocs.com\/\" target=\"_blank\" rel=\"noopener\">Amdocs<\/a> is another brand that\u2019s gone the way of gradient branding:<\/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-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>Amdocs\u2019s gradient menu indicators, buttons and hover effects stand out in stark contrast against the dark background of the website. They also appear over larger swaths, as opposed to Instagram whose branding mostly appears as teeny-tiny details within the app and usually against a white or grey backdrop.\u00a0<\/p><p>What\u2019s more, key parts of the text use a gradient color palette. This helps Amdocs accomplish two goals. The first is to make its typography more memorable. The second is to emphasize their brand messaging.<\/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-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=\"how-to-create-gradients\"><\/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\">How To Create Gradients in Web Design<\/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>There are three common ways to create gradients for a website:\u00a0<\/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-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: Use 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>If you\u2019re comfortable coding styles into your <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-wordpress\/\"   title=\"WordPress website\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4756\">WordPress website<\/a>, you can add gradients that way. The code snippet will look something like this:\u00a0<\/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-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>Don\u2019t worry if you\u2019re not used to writing <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> from scratch. You can use <a href=\"https:\/\/cssgradient.io\/\" target=\"_blank\" rel=\"noopener\">CSS Gradient<\/a> to create your gradients:<\/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-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-77577\" 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>With this tool, you can:\u00a0<\/p><ul><li>Add or remove colors<\/li><li>Set where they start and stop<\/li><li>Increase or subdue the intensity<\/li><li>Set the gradient to linear or radial\u00a0<\/li><li>Change the degree of the rotation<br \/><br \/><\/li><\/ul><p>When you\u2019re done configuring the settings, scroll to the bottom and grab the CSS.\u00a0<\/p><p>If you want to simplify this even further, you can use <a href=\"https:\/\/mycolor.space\/gradient3\" target=\"_blank\" rel=\"noopener\">ColorSpace\u2019s 3-color gradient generator<\/a> instead:<\/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-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-77616\" 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>Simply choose the three colors you want to use, set the orientation and then click \u201cGenerate\u201d. Your CSS codes will appear below.<\/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-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: Use Pre-made Gradients\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>If you\u2019d rather not come up with your own gradients, you can always get pre-made gradients online.<\/p><p><a href=\"https:\/\/uigradients.com\/\" target=\"_blank\" rel=\"noopener\">uiGradients<\/a> is a good choice if you want help coming up with gradient color schemes based on the primary color you\u2019re working with:\u00a0<\/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-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-77617\" 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>You can then grab the CSS of the gradient you like or save it as a JPG if you want to use it as a background on your site.\u00a0<\/p><p>Another option is <a href=\"https:\/\/webgradients.com\/\" target=\"_blank\" rel=\"noopener\">WebGradients.com<\/a>:\u00a0<\/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-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-77618\" 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>You can save these gradients as a CSS snippet, a PNG or you can download the entire pack of 180 gradients for Sketch or Photoshop (if that\u2019s where you\u2019re doing your designing).<\/p><p><a href=\"https:\/\/www.grabient.com\/\" target=\"_blank\" rel=\"noopener\">Grabient<\/a> is another free tool that comes with loads of pre-made color gradients. However, you have a bit more control over how your gradient turns out:\u00a0<\/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-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-77619\" 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>You can change the rotation of the gradient, add or remove colors and customize the color percentages.<\/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-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: Create Gradients in 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>If you\u2019d prefer to do the work inside of WordPress, you can easily do this with Elementor.<\/p><p>For starters, you can easily <a href=\"https:\/\/elementor.com\/blog\/v120-background-gradient\/\" target=\"_blank\" rel=\"noopener\">set color gradients as the background<\/a>:<\/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-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>You can also <a href=\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\" target=\"_blank\" rel=\"noopener\">add filter effects to your images and videos<\/a> with Elementor. You have complete control over how your gradients look from the Style panel:\u00a0<\/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-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>It\u2019s not just the bigger components of your website that you can add gradients to. You can also add gradients to smaller elements like buttons:<\/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-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>Color gradients are guaranteed to attract attention wherever they\u2019re used, so it makes a ton of sense to use them when designing your call-to-action.<\/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-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=\"gradient-design-tips\"><\/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\">Gradient Design Tips\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>Just like a website\u2019s color palette, you should put a lot of thought into your color gradients. Here are some tips to keep in mind:\u00a0<\/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-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. Add a Third Color to Your Gradients To Avoid a Greyish Middle<\/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>If you want to design an attractive gradient, you\u2019ll need more than two colors for it:\u00a0<\/p><ul><li>One for one &lt;side-or-corner&gt;<\/li><li>One for the &lt;linear-color-stop&gt;<\/li><li>One for the other &lt;side-or-corner&gt;<\/li><\/ul><p>If you don\u2019t set a midway &lt;linear-color-stop&gt;, there\u2019s a chance the gradient won\u2019t transition as smoothly and you\u2019ll end up with a greyish color in between them. Like this:\u00a0<\/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-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-77620\" 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>By setting a color value between the two &lt;side-or-corner&gt; values, you can prevent that from happening. Here\u2019s one way to fix it:\u00a0<\/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-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-77587\" 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>If you do want to create a vibrant swatch of color, the third color value is an easy fix to that problem. If you\u2019d prefer to keep the gradient more subtle, try to find color values that are similar to one another.\u00a0<\/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-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. Pick a Primary Color That Sends the Right Signals<\/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>Just because you\u2019re creating a unique color effect with a gradient doesn\u2019t mean that <a href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\" target=\"_blank\" rel=\"noopener\">color theory<\/a> can get thrown out the window. Make sure you choose a primary color that sets the right mood and conveys the right emotions.\u00a0<\/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-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. Allow for Color Contrast, but Not Conflict<\/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>There\u2019s a big difference between <a href=\"https:\/\/elementor.com\/blog\/contrast-web-design\/\" target=\"_blank\" rel=\"noopener\">colors that contrast<\/a> with one another and those that just don\u2019t work well together.\u00a0<\/p><p>Use <a href=\"https:\/\/www.canva.com\/colors\/color-wheel\/\" target=\"_blank\" rel=\"noopener\">Canva\u2019s color wheel<\/a> tool to explore viable options:<\/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-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>Set your primary color in the first field. Then use the color combination generator to explore color pairings for your gradient.<\/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-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. Always Know Where Your Light Source Is<\/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>Even if your gradient comes out looking more surreal than natural, you need to design it with a light source in mind. The direction the light source comes from will dictate what kind of gradient you use (linear vs. radial) and how bright the lighter end of the gradient should be.\u00a0<\/p><p>For example, the <a href=\"https:\/\/readymag.com\/u18071539\/934962\/\" target=\"_blank\" rel=\"noopener\">EMBA for Eurasia<\/a> page has a distinct light source coming from the right side:\u00a0<\/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-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-77621\" 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>This gradient design looks like the sort of gradients we\u2019d see as the sun rises or sets against a beautiful landscape.<\/p><p>You can also use the directionality of the gradient to move visitors more efficiently through the page and to the most important parts of it \u2014 which should be where the lighter end is.\u00a0<\/p><p>The <a href=\"https:\/\/orson.ai\/\" target=\"_blank\" rel=\"noopener\">Orson<\/a> website has an interesting example of this:<\/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-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>The animated gradient orb does a couple of things here. The first is that it really highlights the main message of \u201cBuilding Trust\u201d. The second is that the lighter areas paired with the animation make this site feel energized, and should compel visitors to move onwards to see what else is in store for them.\u00a0<\/p><p>You can also use <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noopener\">the design principle<\/a> of visual hierarchy to alter the amount of light versus dark along the gradient to indirectly show visitors where to focus their attention.<\/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-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. Be Careful About 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>Bandings are lines that appear within color gradients. So, rather than see a smooth transition from one color to the next, visitors will see a subtle delineation between the color values.\u00a0<\/p><p>Here\u2019s an example:\u00a0<\/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-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-77590\" 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>This happens when there aren\u2019t enough color values to fill in the gradient completely. There are a number of reasons why this happens.\u00a0<\/p><p>For starters, the bit depth of the image may be too low. It\u2019s also something that\u2019s more common with large images. That\u2019s because big images create too much distance between the two colors to smoothly cover the space between them. And if there\u2019s a huge contrast between your colors, you\u2019re more likely to see it as well.<\/p><p>If you\u2019re struggling with banding, use your image editing software to try and smooth out those bands with noise and dither settings. Or you may just need to experiment with other colors.<\/p><p>Here\u2019s what happens when the above gradient uses more analogous colors throughout:\u00a0<\/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-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-77591\" 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>Most of the banding is gone from this color swatch now. It might not be the most vibrant of palettes, but it doesn\u2019t make the gradient look as artificial anymore.\u00a0<\/p><p>Let\u2019s look at a real-world example of how to do this. This one is from the <a href=\"https:\/\/ur-bureau.com\/\" target=\"_blank\" rel=\"noopener\">UR Bureau<\/a> and it demonstrates how you can make a gradient look vibrant without going to extremes with color pairings:\u00a0<\/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-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-77592\" 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>Keep in mind that this isn\u2019t a hard-and-fast rule to follow. There are plenty of web designers who use extreme gradients without running into the issue of banding. Oftentimes blurring is used and the gradients take on a more bokeh-style look.\u00a0<\/p><p>Here\u2019s one such example from <a href=\"https:\/\/www.virgileguinard.fr\/\" target=\"_blank\" rel=\"noopener\">Virgile Guinard<\/a>:\u00a0<\/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-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-77593\" 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>And another from <a href=\"https:\/\/jemima.work\/Info\" target=\"_blank\" rel=\"noopener\">graphic designer Jemima<\/a>:\u00a0<\/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-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-77595\" 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>It\u2019s a design choice that we\u2019re starting to see more of on creatives\u2019 websites. So long as they don\u2019t compromise the look of the artists\u2019 portfolios, these rule-breaking choices can work really well.\u00a0<\/p><p><a href=\"https:\/\/zeusjones.com\/\" target=\"_blank\" rel=\"noopener\">Zeus Jones<\/a> is a creative agency that has opted for boundary-pushing gradients. This animated background only appears at the top of the homepage:<\/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-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>The rest of the site uses stark, solid background colors to ensure that the work and messaging remain distraction-free.<\/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-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=\"web-design-gradient-trends\"><\/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. Examples of Stunning Web Design Gradients\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>There are so many ways in which designers are putting gradients to work on the web today. Let\u2019s take a look at some of the most popular trends:\u00a0<\/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-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. Soft, Subtle Gradients \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>The <a href=\"https:\/\/takearecess.com\/\" target=\"_blank\" rel=\"noopener\">Recess<\/a> home page has a number of gradients, but the one to focus on comes about halfway down the page. The blue sky background slowly transitions to pink. When visitors scroll down the page to read the content and look at the graphics, they might not even notice the transition until the background has transitioned to a much darker pink.\u00a0<\/p><p><a href=\"https:\/\/foundation.gucci.com\/\" target=\"_blank\" rel=\"noopener\">Gucci Beauty<\/a> is another beautiful example of soft gradients in action:\u00a0<\/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-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>This one, however, doesn\u2019t require visitors to scroll to experience the eye candy. The rotating background of soft gradients lives above the fold.<\/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-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. Multicolor Gradient Backgrounds\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>The <a href=\"https:\/\/www.kikk.be\/2021\/\" target=\"_blank\" rel=\"noopener\">KIKK Festival<\/a> always has an outlandish website to promote its annual conference. This one is a good example of how to play with numerous colors in a singular gradient without making it feel overwhelming. Spread out over the entire length of the home page, the colors transition slowly from one to the other.\u00a0<\/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-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\">Mood-Enhancing Gradient Effects<\/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> is a really interesting example. Its messaging is similar to Recess\u2019s in that it wants visitors to \u201cRelax\u201d. However, its use of gradients is vastly different.\u00a0<\/p><p>In this case, we see a radial gradient move along to the uplifting and catchy beat of the music playing on the site. It will change color if the visitor changes the song from the top-right controller. Then when the visitor puts the music on hold, the gradient becomes a soft halo shape.<\/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-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. 3D Gradients\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><a href=\"https:\/\/juliebonnemoy.com\/\" target=\"_blank\" rel=\"noopener\">Julie Bonnemoy\u2019s freelance design portfolio<\/a> has a lava lamp-like effect as its hero graphic. The 3D blobs float around the section, occasionally revealing Julie\u2019s welcome message to visitors. The iridescent gradient design is certainly captivating and it makes you wonder what other kinds of spectacles her portfolio has in store for you.<\/p><p><a href=\"http:\/\/adova-group.com\/\" target=\"_blank\" rel=\"noopener\">The Adova Group<\/a> is on a mission to help people relax (in this case it\u2019s to help them sleep better). It\u2019s a trend worth noting if you\u2019re designing a site for a brand with a similar mission. There\u2019s clearly a correlation between the idea of relaxation and the look and feel of gradients:<\/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-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>Even if you\u2019re designing a website for someone not in the health and wellness space, you can still draw inspiration from this surreal 3D landscape. Check out what happens to the orb at the end of this GIF. The gradient design gives the now-data visualization element a 3D appearance. That alone is a cool concept that can be applied to a variety of websites.<\/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-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. Gradients on Website Images<\/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>It\u2019s not always easy finding the perfect raw photo for a website. Luckily, we have plenty of tools that make it easy to adjust the color of our images or add filters to them so they convey the exact look and vibe we need them to.\u00a0<\/p><p>When choosing color filters, consider applying a gradient filter as <a href=\"https:\/\/landing.adobe.com\/en\/na\/products\/marketing-cloud\/ctir-3108-running-on-experience\/index.html\" target=\"_blank\" rel=\"noopener\">Adobe<\/a> does here:\u00a0<\/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-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-77604\" 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>The Running on Experience <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/landing-page-builder\/\"   title=\"landing page\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"2493\">landing page<\/a> has a number of image gradient filters like this one. Here&#8217;s another example:\u00a0<\/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-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-77605\" 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>These image gradients are interesting because they\u2019re not the typical blending of one color to another. It\u2019s only the subject of the photo that\u2019s bathed in a gradient filter.\u00a0<\/p><p>Because this report is all about transformation, the gradient filter works almost as a symbolic representation of the transformation the subject is going under. It\u2019s not until the last image where we see her completely free of any filter or gradients.\u00a0<\/p><p>Another way to experiment with gradients on images is to use a single color filter and fade it out. It essentially turns the filter\u2019s transparent and opaque sides into two different colors.\u00a0<\/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-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. CTA Button Gradients\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>The <a href=\"https:\/\/www.jlobeauty.com\/\" target=\"_blank\" rel=\"noopener\">JLo Beauty website<\/a> is full of iridescent shine, from its background graphics to its product photos. The buttons are no different in terms of style, but they are in terms of how they react to the visitors\u2019 touch:<\/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-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>When someone hovers over any of the \u201cAdd to Bag\u201d buttons, the gradient color comes to life for just a second.\u00a0<\/p><p>You don\u2019t need to make the entire button design a gradient if you don\u2019t want to. <a href=\"https:\/\/wearecroma.it\/\" target=\"_blank\" rel=\"noopener\">Croma<\/a>, for instance, uses gradients strategically through its site. One use for them is as a hover-triggered button animation:\u00a0<\/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-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>As the user hovers over each of the clickable boxes or buttons, a gradient border appears. This same kind of hover confirmation effect would be useful in the navigation.<\/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-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 with Natural Gradients\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>Gradients are naturally occurring in our world. Just look to the sky or the ocean for them. When selecting images for your site, consider integrating their own gradients into your design as <a href=\"https:\/\/www.honesttea.com\/\" target=\"_blank\" rel=\"noopener\">Honest Tea<\/a> has done here. It creates a really unique effect that\u2019s sure to catch many visitors off guard (in a good way).<\/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-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\">Use Gradients To Create an Exciting Experience<\/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>If you\u2019re looking for a fun and unique way to bring your clients\u2019 websites to life, color gradients may be the web design trend to try this year. Not only do they make otherwise flat and solid colors more vibrant and exciting to look at, but they\u2019re useful for focusing attention and improving engagement.\u00a0<\/p>\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>If you\u2019re looking for a fun and unique way to bring your clients\u2019 websites to life, color gradients may be the web design trend to try this year. In this article, we&#8217;ll discuss the use of gradients and provide you with tips and inspiring examples.<\/p>\n","protected":false},"author":2024198,"featured_media":77551,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[167,17,32],"tags":[79],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-77550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-team-writes","category-inspiration","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use Gradients in Web Design &amp; 6 Stunning Examples | Elementor<\/title>\n<meta name=\"description\" content=\"Color is an integral part of web design. But rather than rely strictly on solid colors and filters, this guide will introduce you to color gradients and how to incorporate them into web design.\" \/>\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\/gradients-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Gradients in Web Design &amp; 6 Stunning Examples | Elementor\" \/>\n<meta property=\"og:description\" content=\"Color is an integral part of web design. But rather than rely strictly on solid colors and filters, this guide will introduce you to color gradients and how to incorporate them into web design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/\" \/>\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:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-06.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shely Vaisman\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/\"},\"author\":{\"name\":\"Shely Vaisman\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7\"},\"headline\":\"How To Use Gradients in Web Design: Trends &amp; Examples\",\"datePublished\":\"2021-09-23T11:51:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/\"},\"wordCount\":3551,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Elementor Team Writes\",\"Inspiration\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/\",\"url\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/\",\"name\":\"How to Use Gradients in Web Design & 6 Stunning Examples | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#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\":\"Color is an integral part of web design. But rather than rely strictly on solid colors and filters, this guide will introduce you to color gradients and how to incorporate them into web design.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#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\/gradients-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Use Gradients in Web Design: Trends &amp; Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/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\/#\/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\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7\",\"name\":\"Shely Vaisman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/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\/author\/shelyv\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Gradients in Web Design & 6 Stunning Examples | Elementor","description":"Color is an integral part of web design. But rather than rely strictly on solid colors and filters, this guide will introduce you to color gradients and how to incorporate them into web design.","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\/gradients-in-web-design\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Gradients in Web Design & 6 Stunning Examples | Elementor","og_description":"Color is an integral part of web design. But rather than rely strictly on solid colors and filters, this guide will introduce you to color gradients and how to incorporate them into web design.","og_url":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-09-23T11:51:00+00:00","og_image":[{"width":1201,"height":629,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-06.png","type":"image\/png"}],"author":"Shely Vaisman","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Shely Vaisman"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/"},"author":{"name":"Shely Vaisman","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7"},"headline":"How To Use Gradients in Web Design: Trends &amp; Examples","datePublished":"2021-09-23T11:51:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/"},"wordCount":3551,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","keywords":["Build"],"articleSection":["Elementor Team Writes","Inspiration","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/gradients-in-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/","url":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/","name":"How to Use Gradients in Web Design & 6 Stunning Examples | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#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":"Color is an integral part of web design. But rather than rely strictly on solid colors and filters, this guide will introduce you to color gradients and how to incorporate them into web design.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/gradients-in-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/gradients-in-web-design\/#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\/gradients-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"How To Use Gradients in Web Design: Trends &amp; Examples"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/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\/#\/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\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7","name":"Shely Vaisman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/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\/author\/shelyv\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/77550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024198"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=77550"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/77550\/revisions"}],"predecessor-version":[{"id":93148,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/77550\/revisions\/93148"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/77551"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=77550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=77550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=77550"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=77550"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=77550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}