How to Apply Shadow Styles for Design Elements

Starting from ShortPoint SPFx version 8.5.1.0 and up, ShortPoint Designers can now add shadow styles to the following Design Elements: Image, Button, and Panel. This article will demonstrate how you can apply and customize it.

BEFORE

AFTER

TABLE OF CONTENTS

• Prerequisites
• Adding Shadow Styles
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Edit the Design Element
  • Step 3: Choose a Shadow Style and Customize
  • Step 4: Save
• Removing Shadow Styles
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Edit the Design Element
  • Step 3: Remove Shadow Style
  • Step 4: Save
• Adding Gradient Effect
• Library of Shadow Styles
• Shadow Styles Features

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 an Image, Button, or Panel Design Element on your SharePoint page.

Adding Shadow Styles

Start the interactive tutorial to learn how to apply the Shadow Styles to your Design Elements:

NOTECheck out the Library of Shadow Styles to see all the styles you can use and the Shadow Styles Features to learn more about the options you can modify.

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

NOTEThe Shadow feature is currently only available for the Image, Panel, and Button Design Elements. Before proceeding, make sure you have any of these Design Elements on your page.

• Click the EasyPass tag of the Design Element you’ll use. For this guide, we’ll use the Image Design Element as an example:

• Select the cogwheel icon to open the Settings window:

Step 3: Choose a Shadow Style and Customize

• Go to the Design tab.
• Scroll down and click the Shadow Section.
• Choose a Shadow Style from the drop-down.
• Customize it according to your preference.

NOTECheck out the Library of Shadow Styles to see all the styles you can use and the Shadow Styles Features to learn more about the options you can modify.

Step 4: Save

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

• Click Save to apply your changes:

That’s it! You can now apply Shadow styles to Design Elements.

Removing Shadow Styles

If, for some reason, you need to remove the shadow style, here’s how you can do so:

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

• Click the EasyPass tag of the Design Element that has the Shadow style.
• Select the cogwheel icon to open the Settings window.

Step 3: Remove Shadow Style

• Go to the Design tab.
• Scroll down and click the Shadow Section.
• Choose No Style from the drop-down.

Step 4: Save

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

• Click Save to apply your changes:

There you have it! That’s how easy it is to remove the Shadow style.

Adding Gradient Effect

You can also use the Shadow feature to add a gradient effect to the Panel and Button Design Elements. Check out How to Add a Gradient Effect to Design Elements Using the Shadow Feature to learn how to do it.

Sample Button with gradient

Sample Panel with gradient

Library of Shadow Styles

There are 6 shadow styles you can use. We’ve listed all of them below.

NOTEIn order to better see the effect of the shadow, we’ve applied a color preset. However, the shadow’s default color is light gray.

STYLE 1

STYLE 2

STYLE 3

STYLE 4

STYLE 5

STYLE 6

Shadow Styles Features

Below are the options you can find under the Shadow section of the Settings window:

	Preset	lists all the shadow styles you can use.
	Vertical distance	allows you to adjust the shadow to the left (negative value) or right (positive value) of the element.
	Horizontal distance	allows you to adjust the shadow up (negative value) or down (positive value) of the element.
	Blur	allows you to control how soft or sharp the shadow appears. The higher the value, the softer the shadow is.
	Spread	allows you to expand (positive value) or shrink (negative value) the size of the shadow.
	Position	allows you to choose where the shadow will be, inside or outside the box.
	Color	allows you to choose the color of the shadow. You can [1] add the HEX code, [2] use the drop-down, or [3] use the color picker to select the color you want to use.

Related articles:

• How to Add a Gradient Effect to Design Elements Using the Shadow Feature
• Introducing the Roundness Feature: What It Is and How to Use It
• Managing Visibility of ShortPoint Design Elements