"We are revamping our Knowledge Base articles to serve you better. In case you find something unusual, do not panic. Reach out to our Support Team by submitting a ticket if you ever need some help.”
  1. Home
  2. DropFunnels Builder / Editor Basics
  3. Styles
  4. Colors
  5. Gradients for Row and Column Backgrounds and Overlays
  1. Home
  2. DropFunnels Builder / Editor Basics
  3. Layouts
  4. Columns
  5. Gradients for Row and Column Backgrounds and Overlays
  1. Home
  2. DropFunnels Builder / Editor Basics
  3. DropFunnels Builder Basic Functions
  4. Gradients for Row and Column Backgrounds and Overlays
  1. Home
  2. DropFunnels Builder / Editor Basics
  3. Layouts
  4. Gradients for Row and Column Backgrounds and Overlays
  1. Home
  2. DropFunnels Builder / Editor Basics
  3. Layouts
  4. Rows
  5. Gradients for Row and Column Backgrounds and Overlays
  1. Home
  2. DropFunnels Builder / Editor Basics
  3. Styles
  4. Gradients for Row and Column Backgrounds and Overlays

Gradients for Row and Column Backgrounds and Overlays

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.
row-columns-color-gradients-1-0fa3d5f720593ed38b0b48b066098911

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.

row-columns-color-gradients-2-2d6587bae0db988f81ab4a898f2cd9d0

The DropFunnels Editor 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, as shown in the following screenshot.

row-columns-color-gradients-3-cdda0f4b2a074911c192b5e033ecbf4b

In this screenshot, the gradient angle is 0 degrees, so the gradient line is vertical, the first color stop at 0% equates to the bottom row border, and the second color stop at 100% equates to the top row border.

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, as shown in the following screenshot.

row-columns-color-gradients-4-e48309e6e8f9d618af2b85e671132850

The angle of gradient can be any integer from 0-359. The following screenshot shows examples of the angle of gradient at 0, 90, 180, and 270 degrees. In all of the examples, the first color is set to a navy blue at stop position 0%, and the second color is unspecified at stop position 100%, which in DropFunnels Editor defaults to white with opacity 0 (i.e., transparent).

row-columns-color-gradients-5-4b0d37827d8ea808e613ab572a5365ad

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.

The following screenshot compares two examples in which the two colors are the same, but in the first case the stop positions are 0% and 100%, while in the second case the stop positions are 30% and 70%. In the second case, the gradient starts 30% in from the bottom of the row, and the second color has starts 30% in from the top of the row (100% - 70% = 30%).

row-columns-color-gradients-6-7549b5ad1caa36fd0d4d162b74a2c7bf

In the following screenshot, the color stop locations are set at -40% and 140%, which causes the gradient to start and stop 40% further beyond the gradient line. This means the row background is only displaying the middle 20% of the entire gradient.

row-columns-color-gradients-7-4309727fc031d7d54af4468c20d2f4c5

Note: If the Color 1 stop position is equal to or greater than the Color 2 stop position, the result is no gradient at all, as shown in the following screenshot, in which Position 1 is 30% and Position 2 is 20%.

row-columns-color-gradients-8-a16aaf28f83cd786e913f866a1383396

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.

The examples in the following screenshot show a gradient with a Center Center locus. The first example shows a gradient with color stops at 0% (the locus you chose) and 100% (the row edge). The second example shows a gradient with color stop positions set to 30% and 80% respectively. The 30% means that there is solid color at the very center, fading out to transparency.

row-columns-color-gradients-9-9b592d521c8f69d7810e301c999eb0c1

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.

Was this article helpful?

Related Articles

DF Black Trimmed

ANNOUNCEMENT:
Our Knowledge Base articles are undergoing a comprehensive overhaul to enhance your experience.

If you encounter any unexpected issues or irregularities, feel free to connect with our Support Team by submitting a support ticket for prompt assistance.
Join our Slack Workspace

Join the DropFunnels Slack Workspace and get access to the DropFunnels team, other DropFunnels members, twice-weekly support calls and more!

Join our Slack Workspace

Become A DropFunnels Wizard


Complete our Fast Start Training and learn everything you need to know to launch your first or next funnel.

From Lead Capture to Products, Courses to Blogs, this easy-to-follow training covers it all.

We’ll even give you $50 credit for completing the training!


Become A DropFunnels Wizard