Shadows play a huge role in modern user interfaces. They bring depth and hierarchy to organized rectangles.
Based on how you use them, they can bring joy and a feel of elevation to your interface. Here are my tips to help create better shadows with such design tools as Sketch, Figma, or XD.
Don’t use default application shadows. Instead, adjust the shadow opacity around 5–25%, and set a higher level of blur.
You can also perform this trick with CSS. Here is a great material showcasing many use cases of applying multiple shadows within a single property.
Avoid using #000 for shadows. To make the shadow look more realistic — pick a color based on the element background or its surroundings.
For a more decorative purpose. You can duplicate the layer and put it beneath the original to emit a more natural-looking shadow.
Add a smaller layer with a maxed blur behind your fore element.
Position your shadows based on the light source to emit their direction. Lower the fore layer’s opacity and add a slight border for more depth vibes.
Add a 2-step gradient stroke/border to highlight the shadow and make it crispy.
Put a blurred image behind another to radiate a more natural colored shadow and match it with the image.