Container shadow

Container shadows are visual effects that present elements with a shadow. You can access text shadows by choosing a text element and navigating to Style panel > Effects > Container shadows.

Throughout this guide, you’ll discover:

1. How to generate container shadow transitions
2. How to craft container shadow borders

Ways to make container shadow transitions

You have the capability to incorporate container shadow transitions, so when visitors interact with the element, the container shadow alters its visual display. For instance, you can implement a hover effect on an element that will cause the container shadow’s hue to become darker on hover:

1. Pick the element where you wish to include a container shadow transition
2. Head to Style panel > Effects > Container shadows
3. Press the “plus” icon to insert a container shadow
4. Modify the hue to black and incorporate 20% opacity
5. Incorporate a container shadow to an element and design it with black hue and 20% opacity
6. Select Hover from the States drop-down menu
7. Visit Style panel > Effects > Container shadows
8. Configure the container shadow to 55% opacity
9. Select None from the States drop-down menu
10. Head to Style panel > Effects > Transitions
11. Click the “plus” icon to insert a transition
12. Pick Container shadow from the Type drop-down menu
13. Establish a Duration or keep it at the default 200ms

Upon applying the transition, the hover effect will smoothly transition between the None state and the Hover state. Without the 200ms transition, the hover effect would abruptly shift between different opacity levels.

Ways to make container shadow borders

You can apply multiple container shadows on a single element to produce distinct visual effects. Here’s an example of creating a subtle border and shadow by utilizing multiple container shadows:

1. Choose the element where you want to include a container shadow transition
2. Go to Style panel > Effects > Container shadows
3. Hit the “plus” icon to insert a container shadow
4. Pick Outside as the Type
5. Adjust the X and Y values based on preference
6. Set Blur to 0px
7. Set Size to 1 px
8. Set Color to rgba(0,0,0,0.1) – black with 10% opacity
9. Adjust the hue of the shadow to rgba(0, 0, 0, 0.1) (i.e., black with 10% opacity)
10. Visit Style panel > Effects > Container shadows
11. Press the “plus” icon to insert another container shadow
12. Set Blur to 8px
13. Modify the X and Y values based on preference
14. Set Color to rgba(0, 0, 0, 0.1)