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:
"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.
"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.
"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.
"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.
"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.
"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.
"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:
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.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3