Flipbox Background Gradients in Elementor

Flipbox background gradients are configured in Ultimate Flipbox and Post Flipbox through container controls that include Background Type options for Simple, Gradient, and Image. Choosing Gradient reveals Gradient Color 1, Gradient Color 2, and Gradient Direction 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.

Ultimate Flipbox → Style → Container Box Settings → Front Gradient

Open Elementor Editor.
Select the Ultimate Flipbox widget.
Open the Style tab.
Open Container Box Settings.
Select the Front tab.
Locate Background Type.
Set Background Type to Gradient.
Set Gradient Color 1.
Set Gradient Color 2.
Set Gradient Direction to To Right, To Left, To Bottom, or To Top.
Preview the front gradient.
Click Update to save the page.

Ultimate Flipbox → Style → Container Box Settings → Back Gradient

Open Elementor Editor.
Select the Ultimate Flipbox widget.
Open the Style tab.
Open Container Box Settings.
Select the Back tab.
Set Background Type to Gradient.
Set Gradient Color 1.
Set Gradient Color 2.
Set Gradient Direction to the required direction.
Preview the back gradient.
Click Update to save the page.

Post Flipbox → Style → Container Box Settings → Gradient Background

Open Elementor Editor.
Select the Post Flipbox widget.
Open the Style tab.
Open Container Box Settings.
Select the Front tab or the Back tab.
Locate Background Type.
Set Background Type to Gradient before looking for gradient controls.
Set Gradient Color 1.
Set Gradient Color 2.
Set Gradient Direction.
Repeat for the other side if needed.
Preview the result.
Click Update to save the page.

Story Flipbox → Check Available Background Controls

Open Elementor Editor.
Select the Story Flipbox widget.
Open the Style tab.
Open Container Box Settings.
Review Front Background Color.
Review Back Background Color.
The version 2.1.7 source does not register the same Background Type, Gradient Color 1, Gradient Color 2, and Gradient Direction controls for Story Flipbox.
Use the background controls actually available in this widget; do not follow the gradient steps for Ultimate/Post.

Preview the Gradient Direction and Colors; Click Update

Open Elementor Editor.
Select the Ultimate Flipbox widget.
Preview the front gradient.
Preview the back gradient.
Check text contrast.
Check icon contrast.
Click Update to save the page.

Configure a gradient

Select a Ultimate Flipbox or Post Flipbox widget and open its Style controls.
Open the front or back container settings and set Background Type to Gradient.
Choose the two colors using Gradient Color 1 and Gradient Color 2.
Set Gradient Direction to To Right, To Left, To Bottom, or To Top. The source sets To Right as the default direction.
Preview the card and check the contrast of its text, icon, and button.

If gradient controls are not visible

First confirm that you selected Ultimate Flipbox or Post Flipbox and that the relevant side’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 Style Flipbox Backgrounds and Configure Flipbox Overlays.

Screenshot to add: the gradient controls expanded for one side of a Ultimate Flipbox or Post Flipbox widget. This is a placeholder, not an existing screenshot.

Return to Presets, Styling, and Responsive Layouts for the complete styling and responsive-layout guide.