How to Add a Gradient Underline below ShortPoint Tabs

By default, active ShortPoint Tabs are signified by a change in color, typically the Theme color of the page:

Using Custom CSS, you can add a gradient underline below the active Tab:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy Code
  • Step 3: Edit the Tabs Design Element
  • Step 4: Paste the code
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Tabs Design Element on your page.

Interactive Tutorial

Before starting the tutorial, copy the Custom CSS code below:

.sp-type-tab.shortpoint-active {
border: none;
border-bottom: 5px solid #fff;
border-image:
linear-gradient(to right, red 2%, purple 25%, red 60%, yellow 90%) 1;
}

Step-by-step Tutorial

Follow the detailed guide below to learn how to add a gradient line:

Step 1: Edit the ShortPoint Web Part

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

• Click the cross icon to close the Toolbox:

• Click the ShortPoint tag.
• Select the Edit properties icon:

Step 2: Copy Code

• Copy the Custom CSS code below:

.sp-type-tab.shortpoint-active {
border: none;
border-bottom: 5px solid #fff;
border-image:
linear-gradient(to right, red 2%, purple 25%, red 60%, yellow 90%) 1;
}

NOTEBefore proceeding, make sure you already have the Tabs Design Element on your page. To learn how to add it, check out How to Customize the Tabs Design Element.

• Click the Tabs tag:

• Select the cogwheel icon:

Step 4: Paste the code

• Click the next icon:

• Navigate to the Custom CSS tab.
• Paste the code.
• (Optional) Customize the gradient color values according to your preferences.

Step 5: Save

• Click the green check mark once satisfied.
• Click the eye icon to see your page in real time:

• Click Save to apply all changes:

That’s it! You have successfully added a gradient underline below the active ShortPoint tab.

Related articles:

• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element right from the Page Builder (Advanced Tutorial)
• How to Automatically Rotate ShortPoint Tabs every few seconds
• How to Modify the Width for ShortPoint Tabs
• How to Change the Font Size of a Link and/or the Link Icon Size