How can we help you today?

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


before



AFTER


after


TABLE OF CONTENTS


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:


Edit

  • Close the Toolbox.
  • Select the ShortPoint tag.
  • Edit ShortPoint:


Edit properties icon


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:


EasyPass tag


  • Select the cogwheel icon to open the Settings window:


cogwheel icon


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:


eye icon


  • Click Save to apply your changes:


Save


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:


Edit

  • Close the Toolbox.
  • Select the ShortPoint tag.
  • Edit ShortPoint:


Edit properties icon


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:


eye icon

  • Click Save to apply your changes:


Save


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 Button with gradient


Sample Panel 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 1


STYLE 2


style 2


STYLE 3


style 3


STYLE 4


style 4


STYLE 5


style 5


STYLE 6


style 6


Shadow Styles Features

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


PresetPresetlists all the shadow styles you can use.
Vertical distanceVertical distanceallows you to adjust the shadow to the left (negative value) or right (positive value) of the element.
Horizontal distanceHorizontal distanceallows you to adjust the shadow up (negative value) or down (positive value) of the element.
BlurBlurallows you to control how soft or sharp the shadow appears. The higher the value, the softer the shadow is.
SpreadSpreadallows you to expand (positive value) or shrink (negative value) the size of the shadow.
PositionPositionallows you to choose where the shadow will be, inside or outside the box.
ColorColorallows 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:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 10 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more