Drop shadows are perhaps the most recognizable and widely used shadows in UI design. They create the illusion of an element lifting off the background, providing a subtle sense of elevation. When applied correctly, drop shadows contribute to a clean and polished appearance.

Among other things, drop shadows are used to:

• Create distance between objects
• Indicate the direction of a light source
• Make designs stand out against a background
• Provide a three-dimensional appearance to objects
• Stylize text and icons
• Add borders around a layer or object

Each element has its trick; it’s not the same to create a shadow for a card than for a button. Generally, we will want different intensities, directions, and, ultimately, different effects.

Drop shadow for buttons

When creating drop shadows for buttons in Figma, you’ll want to follow some best practices to achieve an elegant and visually appealing effect.

Here are the key rules for perfect button shadows:

• Color matching:
  • Use a shadow color that is similar to the button color
  • Avoid using black shadows for colorful buttons and vice versa
  • Consistency between the button and shadow color enhances the overall design
• Opacity:
  • Keep the shadow opacity below 40%
  • A subtle shadow adds depth without overpowering the button
• Shadow size:
  • Make the shadow smaller than the button itself
  • This ensures that the shadow doesn’t dominate the design and maintains a balanced appearance

Now, let’s apply these rules to create a button shadow in Figma:

• Select or create a new frame
• Go to the Effects section
• Add a new Effect and choose the “Drop shadow” option
• Adjust the following settings:
  • X: 0 (horizontal offset)
  • Y: 18-24 (vertical offset)
  • Blur: 40-48 (blur radius)
  • Spread: -12 (spread distance)

Image from Mariia Gurkina

Drops shadow for cards

When it comes to creating drop shadows for cards in Figma, you’ll want to follow similar principles as with buttons. Let’s dive into the specifics:

• Color matching:
  • Just like with buttons, match the shadow color with the card’s background color. Consistency is key for a cohesive design
• Opacity and blur:
  • Keep the shadow opacity below 40% to maintain subtlety
  • Adjust the blur value to achieve the desired softness. Softer shadows tend to look more elegant
• Shadow size:
  • Make the shadow size larger for cards compared to buttons. Cards typically have more surface area, so a slightly larger shadow works well
  • Consider a spread value that provides a gentle halo effect around the edges of the card

Now, let’s apply these rules to create a card shadow in Figma:

• Select your card element (frame or rectangle)
• Go to the effects section in the right-hand menu
• Add a new effect and choose “Drop shadow.”

Customize the settings:

• X and Y: Adjust the position of the shadow (usually slightly down and to the right)
• Blur: Set the blur radius for softness
• Spread: Increase it slightly to create a subtle halo effect
• Color: Match it to the card background
• Opacity: Keep it below 40%

Courtesy of UIDesignTips

“May your pixels be perfectly aligned, and your gradients forever smooth!” 😊.