# How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes

> Learn how to add gradient backgrounds to buttons in GHL Customer Care Forms, Surveys, and Quizzes using solid colors, gradient types, angles, and color stops.

- Source: https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/how-to-add-gradient-backgrounds-to-buttons-in-forms-surveys-and-quizzes
- Section: Sites / Funnels and Websites
- Reading time: 4 min
- Images: 7, each explained below

---
Gradient button backgrounds let you create more modern, branded calls-to-action inside GHL Customer Care Forms, Surveys, and Quizzes. Instead of relying only on a single solid color, you can now apply gradient styles directly from the button settings. This gives you more design flexibility without needing custom CSS for standard gradient button styling.

---

**TABLE OF CONTENTS**

-   [What is Gradient Button Background Styling?](#what-is-gradient-button-background-styling)[](#key-benefits-of-gradient-button-background-styling)
-   [Key Benefits of Gradient Button Background Styling](#key-benefits-of-gradient-button-background-styling)[](#button-background-options)
-   [Button Background Options](#button-background-options)
-   [Gradient Types](#gradient-types)[](#gradient-angle)
-   [Gradient Angle](#gradient-angle)[](#color-stops)
-   [Color Stops](#color-stops)[](#how-to-setup-gradient-button-backgrounds)
-   [How To Setup Gradient Button Backgrounds](#how-to-setup-gradient-button-backgrounds)[](#frequently-asked-questions)
-   [Frequently Asked Questions](#frequently-asked-questions)
-   [Related Articles](#related-articles)

---

# **What is Gradient Button Background Styling?**

Gradient button background styling allows you to apply a multi-color background effect to buttons in the Form, Survey, and Quiz Builder. Instead of using one flat color, you can blend two or more colors together using supported gradient types.

This feature helps you create buttons that better match your brand, landing page design, or campaign style. You can choose between a solid background and a gradient background, then customize the gradient type, colors, angle, and color stops directly from the builder.

---

## **Key Benefits of Gradient Button Background Styling**

Gradient button backgrounds give you more control over how buttons appear across Forms, Surveys, and Quizzes. These styling options are especially useful when you want your call-to-action buttons to stand out while keeping the setup simple and code-free.

-   **More Visual Flexibility:** Create button designs that feel more modern and dynamic than a single solid color.
-   **No Custom Code Required:** Apply standard gradient button backgrounds directly from the button settings.
-   **Brand Focused Design Control:** Blend multiple brand colors together for a more customized look.
-   **Multiple Gradient Styles:** Choose from linear, radial, and angular gradient types.
-   **Custom Color Blending:** Add and edit multiple color stops to control how colors transition across the button.
-   **Existing Styles Remain Supported:** Current solid button background styles continue working while gradient styling adds another design option.

---

## **Button Background Options**

Button Background settings control whether a selected button uses a solid color or a gradient background. Choosing the right background type helps you match the button design to the purpose of your form, survey, or quiz.

You can choose between:

-   **Solid Color:** Uses one background color for the button.
-   **Gradient:** Uses multiple colors that blend together across the button.

Use a solid color when you want a clean, simple button style. Use a gradient when you want the button to feel more visually prominent or match a more dynamic page design.

---

## **Gradient Types**

Gradient types determine how the colors blend across the button. Each type creates a different visual effect, giving you more control over the final button appearance.

Supported gradient types include:

-   **Linear Gradient:** Blends colors in a straight direction.
-   **Radial Gradient:** Blends colors outward from a central point.
-   **Angular Gradient:** Blends colors around an angle-based pattern.

  
Some gradient styles support angle adjustment, allowing you to change the direction or orientation of the gradient.

---

## **Gradient Angle**

Gradient angle controls the direction of supported gradient styles. Adjusting the angle changes how the colors flow across the button, which can help the button better match the surrounding page design.

For example, a linear gradient may flow from left to right, top to bottom, or diagonally depending on the selected angle. If the selected gradient type supports angle adjustment, use the angle control to fine-tune the direction of the blend.

---

## **Color Stops**

Color stops define the colors used in the gradient and where those colors appear in the blend. Adding multiple color stops gives you more control over how the gradient transitions from one color to another.

Use color stops to:

-   Add two or more colors to the button background.
-   Adjust how strongly each color appears.
-   Create smoother or more customized transitions.
-   Match brand color combinations more accurately.

---

## **How To Setup Gradient Button Backgrounds**

Proper setup helps ensure your button styling is applied to the correct element and matches the design of your form, survey, or quiz. Before making changes, select the button you want to update so the builder displays the correct button style settings.

1.  Open the Form Builder, Survey Builder, or Quiz Builder in GHL Customer Care.
2.  Select the button element you want to customize.
3.  Open the button style settings.
    
    
![Step 3 of 10: Open the button style settings](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155072470717/original/leKrNtFShxH8F4B7MGlXmQllArzC5LrHTw.png)

**Step 3 of 10: Open the button style settings**

This screenshot accompanies step 3 of 10 in the "How To Setup Gradient Button Backgrounds" section of "How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes". At this point in the walkthrough you open the button style settings. For context, this section explains: Proper setup helps ensure your button styling is applied to the correct element and matches the design of your form, survey, or quiz. Before making changes, select the button you want to update so the builder displays the correct button style settings. The next step is to locate the Button Background section.
- Where to go: Open the button style settings.
- Next: Locate the Button Background section.

Full procedure:

1. Open the Form Builder, Survey Builder, or Quiz Builder in GHL Customer Care.
2. Select the button element you want to customize.
3. Open the button style settings.  <- this image
4. Locate the Button Background section.
5. Choose Gradient instead of Solid Color.
6. Select the gradient type.
7. Add or edit the gradient color stops.
8. Adjust the gradient angle if the selected gradient type supports angle customization.
9. Preview the form, survey, or quiz to confirm the button appears as expected.
10. Save or publish your changes.

    
      
    
4.  Locate the Button Background section.
    
    
![Step 4 of 10: Locate the Button Background section](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155072471334/original/xlvUjjgr7RZ-an4I_hfEkHNqzcz6PuvJnQ.png)

**Step 4 of 10: Locate the Button Background section**

This screenshot accompanies step 4 of 10 in the "How To Setup Gradient Button Backgrounds" section of "How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes". At this point in the walkthrough you locate the Button Background section. For context, this section explains: Proper setup helps ensure your button styling is applied to the correct element and matches the design of your form, survey, or quiz. Before making changes, select the button you want to update so the builder displays the correct button style settings. The next step is to choose Gradient instead of Solid Color.
- What this covers: Locate the Button Background section.
- Next: Choose Gradient instead of Solid Color.

Full procedure:

1. Open the Form Builder, Survey Builder, or Quiz Builder in GHL Customer Care.
2. Select the button element you want to customize.
3. Open the button style settings.
4. Locate the Button Background section.  <- this image
5. Choose Gradient instead of Solid Color.
6. Select the gradient type.
7. Add or edit the gradient color stops.
8. Adjust the gradient angle if the selected gradient type supports angle customization.
9. Preview the form, survey, or quiz to confirm the button appears as expected.
10. Save or publish your changes.

    
5.  Choose Gradient instead of Solid Color.  
      
    
    
![Step 5 of 10: Choose Gradient instead of Solid Color](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155072471504/original/STXFotmx430lKQ0KE4-TLMJLIYKWLdMXOA.png)

**Step 5 of 10: Choose Gradient instead of Solid Color**

This screenshot accompanies step 5 of 10 in the "How To Setup Gradient Button Backgrounds" section of "How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes". At this point in the walkthrough you choose Gradient instead of Solid Color. For context, this section explains: Proper setup helps ensure your button styling is applied to the correct element and matches the design of your form, survey, or quiz. Before making changes, select the button you want to update so the builder displays the correct button style settings. The next step is to select the gradient type.
- What to choose: Choose Gradient instead of Solid Color.
- Next: Select the gradient type.

Full procedure:

1. Open the Form Builder, Survey Builder, or Quiz Builder in GHL Customer Care.
2. Select the button element you want to customize.
3. Open the button style settings.
4. Locate the Button Background section.
5. Choose Gradient instead of Solid Color.  <- this image
6. Select the gradient type.
7. Add or edit the gradient color stops.
8. Adjust the gradient angle if the selected gradient type supports angle customization.
9. Preview the form, survey, or quiz to confirm the button appears as expected.
10. Save or publish your changes.

    
6.  Select the gradient type.  
      
    
    
![Step 6 of 10: Select the gradient type](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155072471669/original/dtH-reNjhNgdvnbET2WfJRjijgRN7iPGBA.gif)

**Step 6 of 10: Select the gradient type**

This animation accompanies step 6 of 10 in the "How To Setup Gradient Button Backgrounds" section of "How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes". At this point in the walkthrough you select the gradient type. For context, this section explains: Proper setup helps ensure your button styling is applied to the correct element and matches the design of your form, survey, or quiz. Before making changes, select the button you want to update so the builder displays the correct button style settings. The next step is to add or edit the gradient color stops.
- What to fill in: Select the gradient type.
- Next: Add or edit the gradient color stops.

Full procedure:

1. Open the Form Builder, Survey Builder, or Quiz Builder in GHL Customer Care.
2. Select the button element you want to customize.
3. Open the button style settings.
4. Locate the Button Background section.
5. Choose Gradient instead of Solid Color.
6. Select the gradient type.  <- this image
7. Add or edit the gradient color stops.
8. Adjust the gradient angle if the selected gradient type supports angle customization.
9. Preview the form, survey, or quiz to confirm the button appears as expected.
10. Save or publish your changes.

    
7.  Add or edit the gradient color stops.  
      
    
    
![Step 7 of 10: Add or edit the gradient color stops](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155072471737/original/wM7SqU_rUY468WbcfdylV29Z0eboCVpdyw.png)

**Step 7 of 10: Add or edit the gradient color stops**

This screenshot accompanies step 7 of 10 in the "How To Setup Gradient Button Backgrounds" section of "How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes". At this point in the walkthrough you add or edit the gradient color stops. For context, this section explains: Proper setup helps ensure your button styling is applied to the correct element and matches the design of your form, survey, or quiz. Before making changes, select the button you want to update so the builder displays the correct button style settings. The next step is to adjust the gradient angle if the selected gradient type supports angle customization.
- What this covers: Add or edit the gradient color stops.
- Next: Adjust the gradient angle if the selected gradient type supports angle customization.

Full procedure:

1. Open the Form Builder, Survey Builder, or Quiz Builder in GHL Customer Care.
2. Select the button element you want to customize.
3. Open the button style settings.
4. Locate the Button Background section.
5. Choose Gradient instead of Solid Color.
6. Select the gradient type.
7. Add or edit the gradient color stops.  <- this image
8. Adjust the gradient angle if the selected gradient type supports angle customization.
9. Preview the form, survey, or quiz to confirm the button appears as expected.
10. Save or publish your changes.

    
8.  Adjust the gradient angle if the selected gradient type supports angle customization.  
      
    
    
![Step 8 of 10: Adjust the gradient angle if the selected gradient type supports angle…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155072471778/original/9t-PPrz8h2F1icXjvD16begl0BhVx3mRyA.png)

**Step 8 of 10: Adjust the gradient angle if the selected gradient type supports angle…**

This screenshot accompanies step 8 of 10 in the "How To Setup Gradient Button Backgrounds" section of "How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes". At this point in the walkthrough you adjust the gradient angle if the selected gradient type supports angle customization. The next step is to preview the form, survey, or quiz to confirm the button appears as expected.
- What to fill in: Adjust the gradient angle if the selected gradient type supports angle customization.
- Next: Preview the form, survey, or quiz to confirm the button appears as expected.

Full procedure:

1. Open the Form Builder, Survey Builder, or Quiz Builder in GHL Customer Care.
2. Select the button element you want to customize.
3. Open the button style settings.
4. Locate the Button Background section.
5. Choose Gradient instead of Solid Color.
6. Select the gradient type.
7. Add or edit the gradient color stops.
8. Adjust the gradient angle if the selected gradient type supports angle customization.  <- this image
9. Preview the form, survey, or quiz to confirm the button appears as expected.
10. Save or publish your changes.

    
      
      
    
9.  Preview the form, survey, or quiz to confirm the button appears as expected.  
      
    
    
![Step 9 of 10: Preview the form, survey, or quiz to confirm the button appears as…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155072471850/original/zgWahThbUWoMQVEkTwkAQhrpdef0lK61-w.png)

**Step 9 of 10: Preview the form, survey, or quiz to confirm the button appears as…**

This screenshot accompanies step 9 of 10 in the "How To Setup Gradient Button Backgrounds" section of "How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes". At this point in the walkthrough you preview the form, survey, or quiz to confirm the button appears as expected. The next step is to save or publish your changes.
- How to confirm: Preview the form, survey, or quiz to confirm the button appears as expected.
- Next: Save or publish your changes.

Full procedure:

1. Open the Form Builder, Survey Builder, or Quiz Builder in GHL Customer Care.
2. Select the button element you want to customize.
3. Open the button style settings.
4. Locate the Button Background section.
5. Choose Gradient instead of Solid Color.
6. Select the gradient type.
7. Add or edit the gradient color stops.
8. Adjust the gradient angle if the selected gradient type supports angle customization.
9. Preview the form, survey, or quiz to confirm the button appears as expected.  <- this image
10. Save or publish your changes.

    
10.  Save or publish your changes.

---

## **Frequently Asked Questions**

**Q: Can I still use a solid color for buttons?  
**A: Yes. You can choose between a solid color background and a gradient background.

**Q: Which builders support gradient button backgrounds?  
**A: Gradient button backgrounds are supported in the Form Builder, Survey Builder, and Quiz Builder.

**Q: Do I need custom CSS to create a gradient button background?  
**A: No. Standard gradient button backgrounds can now be configured directly from the button settings. Custom CSS 

may still be useful for advanced styling needs that are not available through the built-in controls.

**Q: Can I use more than two colors in a gradient?  
**A: Yes. You can add and edit multiple color stops for more customized button designs.

**Q: Will this change existing button styles automatically?  
**A: No. Existing button styles continue working. You can manually switch a button from a solid background to a gradient background when you want to use the new styling option.

---

## **Related Articles**  

-   [Right Sidebar in Form and Survey Builder](https://docs.ghlcustomercare.com/docs/sites/forms/right-sidebar-in-form-and-survey-builder)
-   [Communities - How to Add Custom CSS/JS to Groups](https://docs.ghlcustomercare.com/docs/memberships-and-communities/communities/communities-how-to-add-custom-css-js-to-groups)
-   [Quiz Builder Guide](https://docs.ghlcustomercare.com/docs/sites/quizzes/quiz-builder-guide)
-   [Forms, Surveys & Quizzes: Inline Editing](https://docs.ghlcustomercare.com/docs/sites/forms/forms-surveys-quizzes-inline-editing)
-   [Brand Board Colors in the Form, Survey and Quiz Builder](https://docs.ghlcustomercare.com/docs/marketing/brand-board/brand-board-colors-in-the-form-survey-and-quiz-builder)
-   How to Create a Stylized Survey

---

Documentation for GHL Customer Care. Support: support@ghlcustomercare.com