Inner shadows for soft 3D shapes

How to use it

Apply two inner shadows to a shape. One should be cast on the top and left side of the shape. The other on the bottom and right. Make the upper shadow lighter and the lower darker than the shape colour, assuming a top-left light source.

When to use it

This technique mimics light being cast on a 3D shape with rounded edges. This will give your design an approachable, probably childish look.

What to watch out for

If you use this technique on elements that are not interactive, they might be mistaken for interactive elements because elements with depth can be mistaken for buttons.

Examples