The Background feature provides you with the ability to set the background color of a Widget, apply a gradient pattern to the background or use a background image (Fig 1).
Fig 1
The Fill feature allows you to set the background color of the Widget container by clicking on the colored rectangle and using the pop-up color picker to select a color (Fig 2).
Fig 2
The Gradient feature, when checked, provides you with the ability to set the background gradient of the Widget by clicking on the colored rectangle and using the popup color picker to select a color, various control tools, or selecting a predefined gradient pattern. The sliding bar to the right of the colored rectangle allows you to set the opacity of the gradient from "0" (completely transparent) to "100" (completely opaque) (Fig 3).
Note: making the gradient itself transparent only removes the gradient, but not the underlying fill color your have selected.
Fig 3
Clicking on the checkered rectangle to the right of "Gradient" will bring up the gradient color picker (Fig 4).
Fig 4
The slider control allows you to determine where the gradient shading starts. Sliding the control icon to the right increases the slider's value, which starts the shading at a different location until the value reaches "100" and there is no shading effect.
Just below the large slider is a smaller slider and two gradient pattern options. The small slider allows you to orient the direction of the shading in a clockwise / counter-clockwise pattern, depending on which way you move the slider control.
By default, the linear option is selected. This means the gradient shading will start as a straight line across a given axis of the widget and extend to the other side.
Selecting radial will cause the shading to wrap around the outside edges of the widget and fade towards the center. Two new controls pop up and are set by default to "50" (Fig 5).
Fig 5
Changing these values alters the amount of shading. At the bottom of the color picker you will see a collection of preset gradient design colors and patterns wyou can also select from.
The Style menu includes several features. For more information, read the relevant article:
- Style Menu - Z-index
- Style Menu - Widget Alignment
- Style Menu - Padding
- Style Menu - Border
- Style Menu - Radius
- Style Menu - Background Image
Note: Not all features covered in this article may be available for a particular widget. In addition, certain Style features may have different defaults (on, off, etc.) for different widgets.