Sometimes we use shadows in our interfaces to mimic how lighting draws attention to objects in real life. If an object appears closer to us, we are more likely to focus on it. Shadows are also a helpful way to subtly separate and layer areas of content more softly than a background color change or a harsh border.
We can also use inner shadows to push objects away from us, making them appear pressed into the surface. Although this is a less common use unless you are going for complete skeuomorphism, where most of the interface is made to look like a real life object. There's a lot of shadows in there.
You can apply a shadow to an area or to text. Text shadows can give a very early internet "let's use every decoration available to us" feel. But they can be useful if you need to add extra contrast to text to make it easier to read over the top of a gradient or an image.
As shadows are copying real life objects, you need to design them carefully to make them feel natural. Shadows are created by an object coming between the light and the surface. So if you only have one imaginary light source, all your shadows should be on the opposite side of the object from the light source.
Also, shadows are rarely black. There are darker color of the surface they appear on. Bear that in mind when you're working with shadows and color. Shadows on a blue surface are darker blue. Shadows on a pink surface are darker pink.
To create a shadow in Penpot, select your object, and then in the design panel alongside the shadow section, use the plus button. You can choose between a drop shadow or an inner shadow. Press the option button alongside the shadow options, use the X and y options to choose how far and in what direction your shadow is cast. The higher the number, the further the shadow will be cast from the object's edge and the more dramatic it will look.
You can also add multiple shadows to the same object. See how I've used them here to create a drop shadow as well as a highlight effect using inner shadow to make my shiny, shiny button.
02:43 min