Chakra-UI

I♥️Components

Shadow

|

Chakra Docs

|

⦾ Chakra UI provides several utilities for working with box shadows. The main prop for shadows is boxShadow, which can be used to add a shadow to a box. Chakra UI comes with some predefined shadows that you can use.

Chakra UI defines its shadows using CSS box-shadow property. This property describes offsets, blur radius, spread radius, color, and inset of shadows around the box's frame. Below is a brief overview of the built-in shadows provided by Chakra UI:

  • sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" - This is a small shadow, it applies a shadow effect that is slight and does not protrude much from the box frame. It's good for subtle highlights and low depth elements.
  • md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" - This is a medium shadow, it applies a more pronounced shadow than sm. It's good for medium depth elements and for creating a feeling of elevation.
  • lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" - This is a large shadow. It applies an even more pronounced shadow than md. It's good for higher depth elements and for creating a stronger feeling of elevation.
  • xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" This is an extra-large shadow. It applies a very pronounced shadow. It's good for very high depth elements and for creating a strong feeling of elevation or focus.
  • 2xl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)" This is an extra-extra-large shadow. It applies an extremely pronounced shadow, and it's best for elements that need a significant amount of depth or focus.
  • outline: "0 0 0 3px rgba(66, 153, 225, 0.6)" This is an outline shadow. It's best used to draw attention to a particular element, like for highlighting focus on an input or button.
  • inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)" This is an inner shadow. It's applied inside the box borders and is good for making elements appear as if they're being pressed down or have an inner depth.

As always with CSS, the best way to understand how these shadows affect the visual appearance is to apply them and see how they look. This will give you an intuitive sense of how they can be used effectively in your design.

To import the Box and Text components used below:

Examples

Text With Shadows: you can also apply shadows to text using the textShadow. In this example, the textShadow prop is used to create a shadow effect on the text. It is set to "2px 2px red", specifying a shadow with a horizontal offset of 2 pixels, vertical offset of 2 pixels, and a shadow color of red.

Shadowy Text

Did you know?

Creative Idea No. 1

You can use the theme object to define custom shadows. With Chakra UI, you can define custom shadows in your theme and use them across your application. This can be particularly handy if you use the same shadow settings frequently. Here's how you could do it:
(View code below for theme-defined custom shadow...)

Code

This way, your custom shadow can be used like any of the built-in shadows.

Creative Idea No. 2

You can animate your boxShadow! With Chakra UI, you can apply CSS transitions or animations to your boxShadow. This can be a great way to draw attention or give feedback to users. For instance, you can have a box that increases its shadow on hover. In the following example, when the user hovers over the box, the shadow will smoothly transition from md (medium) to xl (extra large) over 0.9 seconds.
Hover for Shadow!

Code

Creative Idea No. 3

You can create multi-layered shadows. If you want to achieve a complex, layered shadow effect, you can provide multiple shadow definitions separated by a comma. It's a somewhat advanced use of shadows but it can add some depth and sophistication to your UI. In the following example, the box will have two shadows. The first shadow is broader and lighter, and the second is closer and darker, resulting in a layered, complex shadow effect. The shadows are applied in the order they are listed.
Whazzup, Planet?!

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.