Color gradients for row and column backgrounds and overlays

You can create linear and radial color gradients for row and column backgrounds, background overlays, and row shape layers

To use a gradient as a row or column background or background overlay:

• Choose Gradient as the background type, which exposes the Background gradient section, which is described in the following sections.

Linear gradients​

To fully understand how the row or column the settings affect the gradient result, it's important to understand the basic concepts of CSS gradients.

Here's a screenshot of the linear gradient settings.

The Accept Builder linear gradient background requires an angle of gradient and two color stops, described in the following sections.

Angle of gradient​

Imagine a straight line with a direction of movement from one end to the other. The angle of gradient rotates the line along a 360-degree axis, where 0% on the line is the start point of Color 1 and 100% is the end point of Color 2, with a continuous transition from one color to the other.

When the gradient angle is 180 degrees, the gradient line is still vertical, but the first color stop at 0% equates to the top row border, and the second color stop at 100% equates to the bottom row border.

The angle of gradient can be any integer from 0-359.

Note: Because the gradient line rotates on a circular axis and the row or column background is rectangular, the 0% and 100% positions can lie outside the row border for some angles. See this article on CSS linear gradients for a detailed description of how linear CSS gradients work.

Color stop position​

You can vary the color stop position so the gradient starts and stops further inside or outside the endpoints of the gradient line.

Color opacity​

Changing the opacity of the color in the color picker will also affect how the gradient appears. For background overlays, varying the opacity of one or both colors is necessary to let the underlying image or video show through.

Radial gradients​

Radial gradients have the first color stop at a center point, radiating outwards in all directions to the second color stop.

You choose where to place the locus of the radial effect. The first color stop position of 0% is at that locus, and the second color stop of 100% is at the row border.

Like linear gradients, you can set stop positions at <0% or >100% to vary where the gradient starts and stops. If you set the Color 1 stop position to equal to or greater than the Color 2 stop position, the results is an oval with solid edges rather than a gradient.