How to Add a Gradient Effect to Design Elements Using the Shadow Feature

With the Shadow feature, you can easily add a beautiful gradient effect to your Design Elements without needing Custom CSS. This article will show you how to accomplish that.

SAMPLE BUTTON WITH GRADIENT

SAMPLE PANEL WITH GRADIENT

NOTEThis solution is currently only applicable for the Button and Panel Design Elements.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Edit the Design Element
  • Step 3: Choose and Customize Preset Style
  • Step 4: (Optional) Add Roundness
  • Step 5: Save

Prerequisites

• You must have ShortPoint SPFx version  8.5.1.0 and up installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Button or Panel Design Element on your SharePoint page.

Interactive Tutorial

Start the interactive tutorial to add a gradient effect to Design Elements:

NOTELearn more about the options you can customize under Shadow in How to Apply Shadow Styles for Design Elements.

Step-by-step Tutorial

Follow the steps below for a detailed guide.

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit

• Close the Toolbox:

• Select the ShortPoint tag.

• Edit ShortPoint:

Step 2: Edit the Design Element

NOTEThis solution is currently only applicable for the Button and Panel Design Elements. Make sure you have any of these Design Elements before proceeding.

• Click the EasyPass tag of the Design Element you’ll use. For this article, we’ll use the Button Design Element:

• Click the cogwheel icon:

Step 3: Choose and Customize Preset Style

• Go to the Design tab.
• Click the Shadow section.
• Choose a Preset style.
• Set the Position to Inner:

• Customize the look of the shadow according to your preferences:

NOTELearn more about the options you can customize under Shadow in How to Apply Shadow Styles for Design Elements.

Step 4: (Optional) Add Roundness

• To make the design look even better, you can add a Roundness value:

NOTECheck Out Introducing the Roundness Feature: What It Is and How to Use It to learn more about the Roundness feature.

Step 5: Save

• Click the green check mark once satisfied.
• Save your changes:

Congratulations! You now have a beautiful gradient effect on your Design Element.

Related articles:

• Introducing the Roundness Feature: What It Is and How to Use It
• How to Apply Shadow Styles for Design Elements