{"id":1862,"date":"2017-02-01T15:24:43","date_gmt":"2017-02-01T15:24:43","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=1862"},"modified":"2025-12-06T16:33:54","modified_gmt":"2025-12-06T14:33:54","slug":"v120-background-gradient","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/v120-background-gradient\/","title":{"rendered":"Background Gradient: Add Gradient Effects to Your WordPress Design"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

We are happy to introduce you to a new feature to Elementor, Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress page designs.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tSubscribe to Our YouTube Channel<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Our Background Gradient feature really simplifies things for you guys. You no longer have to rack your brains with tons of CSS<\/a>\u00a0or download Gradient plugins and addons. There is no more need for custom CSS guesswork.<\/p>

Background Gradients are now done visually<\/b>, in the Elementor-Easy way.<\/p>

The Background Gradient feature has been one of the most requested features by our users. This release, along with other releases out today, goes to show you that we take your feedback with the utmost importance and consideration.<\/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

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"background\t\t\t\t\t\t\t\t\t\t\t
With Background Gradient, you can easily control the location, angle and colors of the gradient effect, as well as set it as linear or radial.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"gradient\t\t\t\t\t\t\t\t\t\t\t
The gradient effect is also available as a background overlay, giving your videos and images a neat design touch.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"gradient03\"\t\t\t\t\t\t\t\t\t\t\t
Use it on sections or column, like in the example above, which features a gradient form background.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"gradient04\"\t\t\t\t\t\t\t\t\t\t\t
Apart from the obvious use, you can also use this flexible feature to create fun tricks, like the split scene in the above screenshot.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

How Background Gradient works<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Gradient backgrounds are backgrounds that include two colors, each color transitioning to the other.<\/p>

Incorporating gradients has been a growing trend in web design. That trend has gotten even more popular, ever since Instagram used it in their new logo<\/a> last year. The Gradient effect is commonly used by top design brands like InVision, and you can’t miss it when you browse through designer portfolios on Dribbble.<\/p>

Elementor’s\u00a0new Gradient feature allows you to create a wide variety of gradients, varying in shape, color and format.<\/p>

With the Gradient feature, you can easily add background gradient effects to any Elementor section. You select your primary and secondary colors, and the location each one inhabits (from 0 to 100 percent).<\/p>

You can also set the gradient to be linear or radial, and set the angle of the gradient, from the ‘top to bottom up’ angle to the opposite ‘bottom to top’ angle.<\/p>

In addition to section gradients, you also have the option to set background overlays<\/a> as gradients, letting you place them over background images, to give them a special effect.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"vertical\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
\n\t\t\t\t
\n\t\t\t\t\t

Vertical Tabs<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

We are giving the Tabs widget a flip over, so you can now create vertical, and not just horizontal tabs. We have also added a change to make the tabs mobile responsive<\/a> so that tabs turn to an accordion menu on mobile devices.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Image Carousel Captions<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You now have to option to add text to the bottom of your image carousel. Display the title, caption or description below the image, then customize its alignment, color, and typography<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Add an ID to Every Element<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This is an issue that turned up over and over again by the Elementor community, so we decided to follow popular demand, adding ID control to every element. We haven’t given this option until now because an ID should be unique and used once per element, and we wanted to avoid conflicts. This means the responsibility now falls on your hands now to make sure you use a unique ID for every element.<\/p>

The option to add the CSS ID appears above the CSS Class control, in the advanced tab of every widget, column and section.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"1000\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
\n\t\t\t\t
\n\t\t\t\t\t

The Elementor Community Keeps on Growing<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

We are wrapping up the first month of 2017, with Elementor having been downloaded over 300K times, and our Facebook group reaching 1,000 members.<\/p>

This month included a list of new features, including the Price Table, Revision History, hotkeys, Form improvements, 12 new Pro templates and now, the background gradient effect and the other additions mentioned above.<\/p>

I’m sure you can’t wait to use the new Background Gradient feature. We invite you to join the Elementors group<\/a> and share your own gradient rich pages with the rest of the community.<\/strong><\/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":"

We are happy to introduce you to a new feature to Elementor, Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress page designs. Subscribe to Our YouTube Channel Our Background Gradient feature really simplifies things for you guys. You no longer have to rack your brains with […]<\/p>\n","protected":false},"author":4,"featured_media":1874,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-1862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-new-features","tag-build"],"acf":[],"yoast_head":"\nBackground Gradient: Add Gradient Effects to Your WordPress Design<\/title>\n<meta name=\"description\" content=\"Introducing WordPress Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress site.\" \/>\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\/design-wordpress-site-elementor-theme-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"#NewInElementor: Background Gradient. Smashing Effect to Spice Up Your Design - Elementor\" \/>\n<meta property=\"og:description\" content=\"I'm happy to introduce you to a new feature to Elementor, Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress page designs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\" \/>\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=\"2017-02-01T15:24:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-06T14:33:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"#NewInElementor: Background Gradient. Smashing Effect to Spice Up Your Design - Elementor\" \/>\n<meta name=\"twitter:description\" content=\"I'm happy to introduce you to a new feature to Elementor, Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress page designs.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2017\/02\/Gradient-effect.png\" \/>\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=\"Ben Pines\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/v120-background-gradient\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"Background Gradient: Add Gradient Effects to Your WordPress Design\",\"datePublished\":\"2017-02-01T15:24:43+00:00\",\"dateModified\":\"2025-12-06T14:33:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/v120-background-gradient\/\"},\"wordCount\":685,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/v120-background-gradient\/\",\"url\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\",\"name\":\"Background Gradient: Add Gradient Effects to Your WordPress Design\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png\",\"datePublished\":\"2017-02-01T15:24:43+00:00\",\"dateModified\":\"2025-12-06T14:33:54+00:00\",\"description\":\"Introducing WordPress Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress site.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png\",\"width\":1200,\"height\":628,\"caption\":\"Gradient effect\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Features\",\"item\":\"https:\/\/elementor.com\/blog\/category\/new-features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Background Gradient: Add Gradient Effects to Your WordPress Design\"}]},{\"@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\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Background Gradient: Add Gradient Effects to Your WordPress Design","description":"Introducing WordPress Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress site.","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\/design-wordpress-site-elementor-theme-style\/","og_locale":"en_US","og_type":"article","og_title":"#NewInElementor: Background Gradient. Smashing Effect to Spice Up Your Design - Elementor","og_description":"I'm happy to introduce you to a new feature to Elementor, Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress page designs.","og_url":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2017-02-01T15:24:43+00:00","article_modified_time":"2025-12-06T14:33:54+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_title":"#NewInElementor: Background Gradient. Smashing Effect to Spice Up Your Design - Elementor","twitter_description":"I'm happy to introduce you to a new feature to Elementor, Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress page designs.","twitter_image":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2017\/02\/Gradient-effect.png","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/v120-background-gradient\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"Background Gradient: Add Gradient Effects to Your WordPress Design","datePublished":"2017-02-01T15:24:43+00:00","dateModified":"2025-12-06T14:33:54+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/v120-background-gradient\/"},"wordCount":685,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png","keywords":["Build"],"articleSection":["New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/v120-background-gradient\/","url":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/","name":"Background Gradient: Add Gradient Effects to Your WordPress Design","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png","datePublished":"2017-02-01T15:24:43+00:00","dateModified":"2025-12-06T14:33:54+00:00","description":"Introducing WordPress Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress site.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/02\/Gradient-effect.png","width":1200,"height":628,"caption":"Gradient effect"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"New Features","item":"https:\/\/elementor.com\/blog\/category\/new-features\/"},{"@type":"ListItem","position":3,"name":"Background Gradient: Add Gradient Effects to Your WordPress Design"}]},{"@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\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1862","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=1862"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1862\/revisions"}],"predecessor-version":[{"id":146857,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1862\/revisions\/146857"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/1874"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=1862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=1862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=1862"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=1862"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=1862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}