{"id":602,"date":"2019-03-11T22:30:37","date_gmt":"2019-03-11T22:30:37","guid":{"rendered":"https:\/\/rockythemes.com\/nimva3\/docs\/?p=602"},"modified":"2019-03-11T22:37:06","modified_gmt":"2019-03-11T22:37:06","slug":"how-to-create-a-gradient-background","status":"publish","type":"post","link":"https:\/\/rockythemes.com\/nimva3\/docs\/how-to-create-a-gradient-background\/","title":{"rendered":"How to create a Gradient Background"},"content":{"rendered":"\n

To create a Gradient Background<\/strong>, first edit your page using the Front End Editor<\/strong> and add a Row element on your page – or edit an existing Row element.<\/p>\n\n\n\n

In the Design Options<\/strong> tab, add a padding top and padding left. Try using percent values, to keep the same padding regardless of the device being used – mobile or desktop. E.g: 10% for top padding and 10% for bottom padding.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next navigate to the Color Overlay tab and check the Enable Gradient option.<\/strong><\/p>\n\n\n\n

Choose the colors you want to use for the Gradient using the Color Overlay option<\/strong> and Color Overlay 2 option<\/strong>.<\/p>\n\n\n\n

Use the Gradient Angle to specify the angle of the gradient being applied.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Play around with the colors and the gradient angle until you are satisfied with the result.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In the example above the gradient is using the default 90 degrees angle with a blue color set for Color Overlay and a violet color set for Color Overlay 2.<\/p>\n\n\n\n

Setting the gradient angle to 0 or 180 degrees will rotate the gradient with the corresponding degrees, as seen below:<\/p>\n\n\n\n

\"\"
Gradient with 0 degrees<\/strong>
<\/figcaption><\/figure>\n\n\n\n
\"\"
Gradient with 180 degrees<\/strong><\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

We can also add a background image in the Design Options tab and set the Gradient colors to be slightly transparent. This will create a nice mask with Gradient effect over our image.<\/p>\n\n\n\n

\"\"
Setting the background image<\/strong><\/figcaption><\/figure>\n\n\n\n

After setting the background image, go back to the Color Overlay tab and use the Alpha controller to change the opacity of the Color Overlay and Color Overlay 2. The values we used are 75% for both color overlays.<\/p>\n\n\n\n

\"\"
Setting the Alpha Opacity of the Color Overlays<\/strong><\/figcaption><\/figure>\n\n\n\n

The result is going to be the following:<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

Creating a Gradient Background using the Page Builder<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-602","post","type-post","status-publish","format-standard","hentry","category-page-builder"],"_links":{"self":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":3,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"predecessor-version":[{"id":613,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/602\/revisions\/613"}],"wp:attachment":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}