By default, active ShortPoint Tabs can be recognized by the different color - the theme color. It is possible to add a gradient underline below the active Tabs with some custom CSS.

Before:

After:

If you would like to apply this solution, please follow the steps in this support article.

Step 1. Insert ShortPoint Tabs Design Element

The Tabs Design Element can be easily added to your pages using ShortPoint Page Builder.

• Modern page:

You can start with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts.

• Classic page:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.

Then, select the Tabs Design Element from your ShortPoint Page Builder menu:  

Step 2. Copy the code

Here it is the piece of code you will need to use, please copy it:

.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 3. Open the Custom CSS settings of ShortPoint Tabs

Open the settings of the Tabs by pressing the cog wheel icon.

Switch to Custom CSS tab:

Step 4. Update the ShortPoint Tabs with code

Paste the code into the Custom CSS field as shown in the animation below:

You may check how it will look like on your page by clicking the Preview button:

Click Update and save the page.

Result

That's it. Here is an example of how it may look like on the page:

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