{"id":11351,"date":"2019-06-24T09:21:04","date_gmt":"2019-06-24T09:21:04","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=11351"},"modified":"2023-02-02T09:11:32","modified_gmt":"2023-02-02T09:11:32","slug":"jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/","title":{"rendered":"How to Create a Gradient Background for Header Block of the Pricing Table"},"content":{"rendered":"\n<p>A pricing table is a necessary element for your website if you provide products or services. You can display prices for different courses, subscription plans, tickets, and visitors are able to select an appropriate one of them.<\/p>\n\n\n\n<p>With the Pricing Table widget of JetElements plugin, it is available to show a price, a detailed list with main features of the plan, and add an action button that users have an opportunity to decide which plan they are interested in and purchase it easily. Make the <strong>Header<\/strong> block of the pricing table brighter using a certain <strong>CSS code<\/strong>. Let&#8217;s start.<\/p>\n\n\n\n<p>You can color the background of the header block in the <strong>Pricing Table<\/strong> widget in a gradient manner by adding one of these CSS codes in the <strong><em>Appearance &gt; Customize &gt; Additional CSS<\/em><\/strong> block:<\/p>\n\n\n\n<ul>\n<li><strong>for linear gradient<\/strong>:<br><code>.pricing-table__heading {<br>background-image: linear-gradient(180deg, #000 0%, #f2295b 100%);<br>}<\/code><\/li>\n\n\n\n<li><strong>for radial gradient:<\/strong><br><code>.pricing-table__heading {<br>background-image: radial-gradient(at center center, #000 0%, #f2295b 100%);<br>}<\/code><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/customize.png\" alt=\"Additional CSS\" class=\"wp-image-11355\"\/><\/div>\n\n\n\n<p>In case you use <strong>Elementor Pro<\/strong>, you should add the following CSS code and a selector macros before it in the <strong>Advanced &gt; Custom CSS<\/strong> block of the <strong>Pricing Table<\/strong> widget settings.<\/p>\n\n\n\n<ul>\n<li><strong>for linear gradient<\/strong>:<br><code>selector .pricing-table__heading {<br>background-image: linear-gradient(180deg, #000 0%, #f2295b 100%);<br>}<\/code><\/li>\n\n\n\n<li><strong>for radial gradient<\/strong>:<br><code>selector.pricing-table__heading {<br>background-image: radial-gradient(at center center, #000 0%, #f2295b 100%);<br>}<\/code><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/elementor-pro-customize.png\" alt=\"Custom CSS\" class=\"wp-image-11356\"\/><\/div>\n\n\n\n<p>Click the &#8220;<strong>Update<\/strong>&#8221; button to save the changes and view the updated gradient header block of the pricing table on the front end.<\/p>\n\n\n\n<p>Create a pricing table and style its header block in a gradient way using the mentioned CSS codes with the <strong>JetElements Pricing Table<\/strong> widget.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From this tutorial, you will learn how to create a gradient background of the header in the Pricing Table widget of JetElements plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[512],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: How to Add Background to Pricing Table Header | Crocoblock<\/title>\n<meta name=\"description\" content=\"Study how to create a gradient background with CSS code to the header of the Pricing Table widget for Elementor. Add some custom style!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Add Background to Pricing Table Header | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Study how to create a gradient background with CSS code to the header of the Pricing Table widget for Elementor. Add some custom style!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-02T09:11:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/customize.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/\",\"name\":\"JetElements: How to Add Background to Pricing Table Header | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-24T09:21:04+00:00\",\"dateModified\":\"2023-02-02T09:11:32+00:00\",\"description\":\"Study how to create a gradient background with CSS code to the header of the Pricing Table widget for Elementor. Add some custom style!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Gradient Background for Header Block of the Pricing Table\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Add Background to Pricing Table Header | Crocoblock","description":"Study how to create a gradient background with CSS code to the header of the Pricing Table widget for Elementor. Add some custom style!","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:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Add Background to Pricing Table Header | Crocoblock","og_description":"Study how to create a gradient background with CSS code to the header of the Pricing Table widget for Elementor. Add some custom style!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/","og_site_name":"Help Center","article_modified_time":"2023-02-02T09:11:32+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/customize.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/","name":"JetElements: How to Add Background to Pricing Table Header | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-24T09:21:04+00:00","dateModified":"2023-02-02T09:11:32+00:00","description":"Study how to create a gradient background with CSS code to the header of the Pricing Table widget for Elementor. Add some custom style!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-gradient-background-for-header-block-in-the-pricing-table-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Gradient Background for Header Block of the Pricing Table"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/11351"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=11351"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=11351"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=11351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}