{"id":207,"date":"2026-10-17T14:16:25","date_gmt":"2026-10-17T14:16:25","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=207"},"modified":"2026-10-18T00:21:40","modified_gmt":"2026-10-18T00:21:40","slug":"apply-flipbox-background-gradients","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/apply-flipbox-background-gradients\/","title":{"rendered":"Apply Background Gradients"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Flipbox background gradients are configured in Ultimate Flipbox and Post Flipbox through container controls that include <strong>Background Type<\/strong> options for Simple, Gradient, and Image. Choosing <strong>Gradient<\/strong> reveals <strong>Gradient Color 1<\/strong>, <strong>Gradient Color 2<\/strong>, and <strong>Gradient Direction<\/strong> for the front or back side. These specific gradient controls are not registered in the Story Flipbox container styling reviewed for version 2.1.7.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ultimate Flipbox \u2192 Style \u2192 Container Box Settings \u2192 Front Gradient<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Ultimate Flipbox<\/strong> widget.<\/li>\n<li>Open the <strong>Style<\/strong> tab.<\/li>\n<li>Open <strong>Container Box Settings<\/strong>.<\/li>\n<li>Select the <strong>Front<\/strong> tab.<\/li>\n<li>Locate <strong>Background Type<\/strong>.<\/li>\n<li>Set <strong>Background Type<\/strong> to <strong>Gradient<\/strong>.<\/li>\n<li>Set <strong>Gradient Color 1<\/strong>.<\/li>\n<li>Set <strong>Gradient Color 2<\/strong>.<\/li>\n<li>Set <strong>Gradient Direction<\/strong> to <strong>To Right<\/strong>, <strong>To Left<\/strong>, <strong>To Bottom<\/strong>, or <strong>To Top<\/strong>.<\/li>\n<li>Preview the front gradient.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ultimate Flipbox \u2192 Style \u2192 Container Box Settings \u2192 Back Gradient<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Ultimate Flipbox<\/strong> widget.<\/li>\n<li>Open the <strong>Style<\/strong> tab.<\/li>\n<li>Open <strong>Container Box Settings<\/strong>.<\/li>\n<li>Select the <strong>Back<\/strong> tab.<\/li>\n<li>Set <strong>Background Type<\/strong> to <strong>Gradient<\/strong>.<\/li>\n<li>Set <strong>Gradient Color 1<\/strong>.<\/li>\n<li>Set <strong>Gradient Color 2<\/strong>.<\/li>\n<li>Set <strong>Gradient Direction<\/strong> to the required direction.<\/li>\n<li>Preview the back gradient.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Post Flipbox \u2192 Style \u2192 Container Box Settings \u2192 Gradient Background<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Post Flipbox<\/strong> widget.<\/li>\n<li>Open the <strong>Style<\/strong> tab.<\/li>\n<li>Open <strong>Container Box Settings<\/strong>.<\/li>\n<li>Select the <strong>Front<\/strong> tab or the <strong>Back<\/strong> tab.<\/li>\n<li>Locate <strong>Background Type<\/strong>.<\/li>\n<li>Set <strong>Background Type<\/strong> to <strong>Gradient<\/strong> before looking for gradient controls.<\/li>\n<li>Set <strong>Gradient Color 1<\/strong>.<\/li>\n<li>Set <strong>Gradient Color 2<\/strong>.<\/li>\n<li>Set <strong>Gradient Direction<\/strong>.<\/li>\n<li>Repeat for the other side if needed.<\/li>\n<li>Preview the result.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Story Flipbox \u2192 Check Available Background Controls<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Story Flipbox<\/strong> widget.<\/li>\n<li>Open the <strong>Style<\/strong> tab.<\/li>\n<li>Open <strong>Container Box Settings<\/strong>.<\/li>\n<li>Review <strong>Front Background Color<\/strong>.<\/li><li>Review <strong>Back Background Color<\/strong>.<\/li>\n<li>The version 2.1.7 source does not register the same <strong>Background Type<\/strong>, <strong>Gradient Color 1<\/strong>, <strong>Gradient Color 2<\/strong>, and <strong>Gradient Direction<\/strong> controls for Story Flipbox.<\/li>\n<li>Use the background controls actually available in this widget; do not follow the gradient steps for Ultimate\/Post.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Preview the Gradient Direction and Colors; Click Update<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Ultimate Flipbox<\/strong> widget.<\/li>\n<li>Preview the front gradient.<\/li><li>Preview the back gradient.<\/li>\n<li>Check text contrast.<\/li><li>Check icon contrast.<\/li>\n<li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\">Configure a gradient<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>Select a Ultimate Flipbox or Post Flipbox widget and open its Style controls.<\/li><li>Open the front or back container settings and set <strong>Background Type<\/strong> to <strong>Gradient<\/strong>.<\/li><li>Choose the two colors using <strong>Gradient Color 1<\/strong> and <strong>Gradient Color 2<\/strong>.<\/li><li>Set <strong>Gradient Direction<\/strong> to <strong>To Right<\/strong>, <strong>To Left<\/strong>, <strong>To Bottom<\/strong>, or <strong>To Top<\/strong>. The source sets <strong>To Right<\/strong> as the default direction.<\/li><li>Preview the card and check the contrast of its text, icon, and button.<\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\">If gradient controls are not visible<\/h2>\n\n\n<p class=\"wp-block-paragraph\">First confirm that you selected Ultimate Flipbox or Post Flipbox and that the relevant side&#8217;s background type is set to Gradient. Story Flipbox uses different background controls in the reviewed source. If you want a photo background instead, read <a href=\"\/docs\/flipbox-addon-for-elementor\/style-flipbox-backgrounds\/\">Style Flipbox Backgrounds<\/a> and <a href=\"\/docs\/flipbox-addon-for-elementor\/configure-flipbox-overlays\/\">Configure Flipbox Overlays<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Screenshot to add:<\/strong> the gradient controls expanded for one side of a Ultimate Flipbox or Post Flipbox widget. This is a placeholder, not an existing screenshot.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Return to <a href=\"\/docs\/flipbox-addon-for-elementor\/styling-layout-responsive\/\">Presets, Styling, and Responsive Layouts<\/a> for the complete styling and responsive-layout guide.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Background Type set to Gradient to configure two gradient colors and a direction in Basic Flipbox or Post Flipbox.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":204,"menu_order":0,"template":"","class_list":["post-207","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":21,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/207\/revisions"}],"predecessor-version":[{"id":784,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/207\/revisions\/784"}],"up":[{"embeddable":true,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/204"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}