Skip Navigation
Learn design

How to create depth in Sketch

Learn how to use shadows, gradients and blurs to breathe life into your designs

Looking to give a little more realism to your designs? Maybe you’re familiar with working with depth or are even a big skeuomorphism enthusiast. Or maybe you’re a diehard fan of flat design. We get it! Flat can be sleek, simple and versatile. But sometimes your designs just need more. More realism, more depth, more life.

Take illustrations, for example. There’s just something eye-catching about a design that seems to come out of the screen. While you don’t have to go super crazy and photorealistic, adding a bit of depth can really spruce up your icons and interfaces.

In this tutorial, Joseph will show you how to create depth intuitively. We know it can be tricky to discern how others might’ve achieved the effect. When done well, the seams of depth are unnoticeable. Take a look at the switch below as an example. Our eyes can tell the difference between flat and realistic, but it’s hard to figure out the steps to follow. Below, we’ll teach you how different techniques to achieve this look.

You can also follow along with our practice doc, where you can inspect Joseph’s final version.
An image showing a switch in Sketch before and after applying depth effects

A switch made in Sketch, before and after applying depth effects.

We’ll show you how to use:

  • Simple style properties to make basic shapes look 3D
  • Shadows and highlights to mimic how light hits surfaces
  • Gradients to illustrate the falloff of light
  • Blurs to blend surfaces

Ready? Let’s dive in 🪂

You can watch Joseph’s tutorial now, or go at your own pace with our guide 👇

1. Draw a switch container and knob

To get started, let’s focus on creating a flat shape that we can later improve on. In this case, we’ll need a gray rectangle with rounded corners and a white circle to create the container and knob. We’ll be working with a 50x30 px switch container and a 26x26 px knob — just to give you a sense of scale.

2. Tone down the background

An image showing toned down background color

Now we can start thinking about realism. Let’s get into the mindset that each layer is a physical surface being hit by a light source. This will help you figure out where to add highlights and shadows. In this case, let’s imagine the light source is right above our design. To help you out, select the background and turn it from white to light gray.

Joseph’s pro tip: Think of this image as if it were a photograph you’re trying to expose properly. For example, an absolute white surface typically means the image is overexposed.

3. Add a gradient to the switch container

Image showing added gradient

Using this new mindset, let’s darken the switch container. To show how the container is casting a shadow on itself, let’s apply a gradient that’s darker at the top.

4. Add an inner shadow to the switch container

Image showing added inner shadow

It’s also important to think about how a light source with a warm tone will create cooler shadows. Let’s add a bit more depth with an Inner Shadow. The default color will work well for this exercise, but reduce it to a Y position of 3 and soften it by increasing the blur to around 8.

Joseph’s pro tip: Always keep the qualities of the light source in mind. If the light source is warmer, the result will be cooler shadows.

5. Add a drop shadow to the knob

Our container is looking good! Let’s focus on the knob next. Since the knob is sticking out, it should be casting a shadow. Let’s go ahead and add a shadow using the same Y position of 3 and blur of 8. You can also darken this shadow a little bit by increasing its alpha.

6. Mask the knob and shadow into the switch container

When working with depth, we’ll often need to combine a few techniques to create the desired effect. In this case, the switch container protrudes out further than what we’d want if our goal is for the knob to look more flush with the background layer. So how do we make sure the knob only casts its shadow into the switch container?

Easy! Let’s mask the knob and container by selecting both layers, Control-clicking, and choosing Mask Selection from the menu. Now that the knob and shadow will be clipped within the path of the container.

Joseph’s pro tip: Be open to working with a few techniques to create depth. It’s better to make a lot of subtle changes than to try and force the result in a few sharper steps.

7. Add a gradient to the knob

But we’re not done with the knob yet! Let’s make it a bit more tangible by replacing the white fill with a subtle gradient. We want the surface to seem as if it’s slightly bulging out, so make the top part lighter than the bottom part. Always keep in mind that the light is coming from above.

8. Soften the knob edges

Edges in the real world aren’t as sharp as those of vector shapes. In this case, we’d be able to gain some realism by rounding the edges of the knob and allowing it to catch a bit of highlight at the top and shadow at the bottom.

We can create this effect by using Inner Shadows.

Joseph’s pro tip: Always consider the differences between the real object and its 2D depiction. For example, edges in real life are not as sharp as the edges of a vector shape.

Start by adding a white inner shadow and increasing the alpha value to 100 since white on light gray is already subtle. To make it easier to see what we’re doing, let’s set the blur to 0 temporarily. At this scale, even a Y position of 1 is pushing things a bit too far, so let’s set it to something like 0.5. Once you’re happy with the outcome, you can set the blur to 1.

Next, add a black Inner Shadow to show the light rolling off the bottom edge. But let’s tone down the alpha to 1 so it doesn’t look too heavy. This shadow is the inverse of the highlight we just created, so set the Y position to -0.5 so it peeks up from the bottom. Then finally set the blur to 1.

9. Duplicate and shrink the knob

If you find yourself squinting your eyes to notice the difference between steps, don’t worry! That’s totally normal. The key to realistic depth is subtleness, so it will take a while for it all to come together.

With this next step, you’ll finally be able to see what all the hard work has been leading up to. Select the knob and press D to duplicate it. Hold and resize it to about 16x16 px. Finally, disable the shadow. This should result in a bulge sticking out of the knob.

Take this opportunity to increase the contrast of the Gradient Fill and bring up the alpha of the dark Inner Shadow to make it look a bit more pronounced.

10. Flip the extrusion vertically

If you’re wondering why we created a protrusion instead of an indentation… it’s because we’ve got to flip it! Click on the Flip Vertically button under the Layer Properties section of the Inspector, and watch the magic happen.

11. Soften the indentation

Right now, the edges are looking a bit too crisp and totally not in line with our subtle approach. A Gaussian Blur will help solve that. Just apply it to the whole thing with a radius of 1.

12. Add a slight outer bevel

For the finishing touches, let’s add some regular shadows outside the container to contour the top edge. Add a dark shadow at the top to make the surface appear to round inward slightly. Then, add a light shadow at the bottom to highlight the edge as it rolls back out.

13. Add a gradient to the background

To help us unify the whole look, change the background from a solid fill to a gradient that’s slightly lighter at the top. This way, it’ll be consistent with the position of our implied light source. And there you go!

As you can see, there are many techniques you can use to create depth. For simple designs, you might just need one. If you want to create more complex or realistic designs, then stacking up on techniques will help you achieve the best results.

Remember, it’s all about subtlety — and complex subtlety takes time! If you’re ready to take your depth game to the next level, check out David Blum’s tutorial on how to create a one-layer strawberry. Just beware: the strawberry looks so real that it might just make you hungry.

You may also like

Try Sketch for free

Whether you’re new to Sketch, or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.

Get started for free
Get started for free