Shadows play an important role in many forms of visual design including illustrations, pictures, and 3D graphics. While UI design shadows may not demand the same level of detail as other forms, they are still essential. When applied correctly, shadows help elevate a design’s overall look and feel. It gives UI elements a sense of depth and visual hierarchy, making the interface more realistic and intuitive.
Shadows can also be used for various indicators in an interface — applying a box shadow when hovering a button is a common pattern. Or defining a light source in a design.
In this post, we’ll take an in-depth look at shadows, explore the different kinds, go over some techniques for executing elegant shadows, and learn how to create them in Figma — with plugins. So sit back, relax, and enjoy the read!
Design is naturally subjective. So trying to pick a universal, one-size-fits-all solution for implementing shadows isn’t the best route. A “good shadow” ultimately depends on the overall goal of your design.
However, there are several known methods that you can apply to make your shadows appear more elegant. Take a look at this design tweet that caught some attention on X — it garnered some satirical comments:
In this tweet, the author raises a point that “What differentiates a senior designer and a junior designer is how soft their shadows are.” While I do not agree with their claim, I do agree with the main message being passed across — softer shadows make for better designs.
When you examine the shadows on the buttons more closely, it becomes evident that the button on the right, attributed to the “senior designer,” has a notably softer, more subtle quality with a low level of contrast compared to its counterpart on the left, crafted by the “junior designer” that has a harsh contrast with its background.
From the two samples, we can deduce that the color of a shadow (including the opacity) and the blur value of the shadow play a big role in the overall feel and look of a shadow. So, let’s learn how to make these shadows, starting off first by defining the different types you’ll come across.
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.
Drop shadows are typically cast in a direction opposite to the light source, highlighting the separation between elements and generating a three-dimensional effect. Drop shadows can contribute to a clean and polished appearance when applied correctly. This type of shadow will be our main focus in this article.
Inner shadows differ from drop shadows in that they are placed inside an element’s borders. They create a look where the edges seem to sink in as if they’re carved into the design. Inner shadows are commonly used to show depth and emphasize the internal structure of elements.
There are also other types of shadows like text shadows and background blur shadows. But we don’t need to cover those in this post — those are dependent on branding and really too contextual for many best practices. Now, let’s focus on creating drop shadows in Figma, where most designers find themselves creating shadows.
Drop shadows in Figma can be found at the bottom of the right-hand panel under the Effects category. When creating a drop shadow in Figma, we are allowed to precisely control the position and appearance of the shadow through a few key properties. These properties include:
Let’s see how these properties can create shadows in Figma. I’ve applied a drop shadow to the card component below. Here is the default shadow styling provided by Figma:
As you might notice, the default shadow isn’t anything impressive. At least not up to the standards of a “senior designer.” So, you might wonder, how can we achieve a smoother drop shadow? Let’s explore various scenarios where a drop shadow comes into play and learn how to optimize its appearance.
It’s a common guideline to use a darker hue for the surface (or background) color to create an accurate shadow. When casting a shadow on any surface, the target color is the color of the surface underneath the component. In this case where we have a white surface, using a darker version of white — gray or black — would be the best option for creating an accurate shadow.
By increasing the Y and Blur values, we can achieve the shadow below:
Experienced designers would argue that this shadow is still not smooth enough — which is true because the contrast between the shadow and the surface is noticeable. Increasing the Blur value and lowering the opacity both contribute to creating a softer shadow:
It would help if you always kept the shadows across your design consistent. This entails using the same light source angle (using X and Y offsets) and maintaining a consistent blur value. You could even have a “Y to Blur” ratio that you use across all components in your design.
It is just as easy to cast a shadow on a colored or dark surface using the earlier technique. Although, if you are casting a shadow on a black or near-black surface, then a better option would be to create a glow effect by using a lighter color of the target component — here’s an example from my website chinwike.space:
Supposing we want to cast a shadow on our blog post component over a green surface, we can use a darker hue of the color.
Let’s place the earlier component on a green surface. I have provided two examples: one using a darker shade of green and another with a standard black shadow.
Notice how the dark green shadow on the left blends in better with the background than the #00000 shadow on the right.
When applying shadows to UI elements, our choices are constrained, and the quality of these shadows falls short compared to those generated in a 3D environment. Nevertheless, we can use a few techniques or tools to enhance the visual appearance of our shadows.
Layering shadows involves stacking multiple drop shadows. This technique is effective for creating more detailed shadows than what using just one shadow would allow.
Take a look at this button featuring a combination of shadows. On the X-axis, you’ll notice two purple shadows peeking out on each side, while on the Y-axis, there are two shadows in yellow and red. It’s important to be mindful of how colors interact when layering shadows, especially when changing the opacity. Here, the red and yellow shadows blend, producing an orange color:
In the above design, I used different colors to make the shadows visible. Now, check out a simpler design. Here, the shadows smoothly go from light sky blue to a darker navy blue, creating a nice, gradual change in color:
There are several plugins available in the Figma marketplace that can help you instantly create good-looking shadows on any component.
One tool I’ve discovered that has been helpful is Beautiful Shadows. This tool provides an intuitive interface and allows you to manipulate a controllable light source, casting shadows on your component in your desired direction. It then automatically generates shadow styles, often layering them for a polished effect:
In this post, we explored the pivotal role shadows play in enhancing visual elements across a user interface. While UI design may not demand the same intricacies as other visual mediums, effective shadow application can significantly elevate a design’s overall aesthetic. Shadows, when strategically applied, create depth and visual hierarchy, contributing to a more realistic and intuitive interface.
Header image source: IconScout
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Embark on an exploration of what conceptual design entails, how it shapes the foundation of projects, and its impact on UX.
Simplicity is good UX until it strips away personality. Great interfaces balance ease of use with emotional depth and identity.
In this guide, you can learn how to use Autodesigner, Uizard’s AI-powered wireframe generator, to speed up your design process.
Designers who only do ux are falling behind. Level up your UX career with 9 high-impact skills that recruiters and product teams are actively searching for.
Learn more →
