Gradient as 3D face

How to use it

Add a fading gradient to a shape above a container so that it looks like the container is a 3D shape fading into the distance.

When to use it

Use this if you want to add depth to your design. It’s got a “retro future” effect, so it might help or hurt your brand. The example below is a rectangle, and this easiest, but you could use the same effect for other shapes.

What to watch out for

This will make layout more difficult. Do you align other elements to the top of the container, or the top of the fading gradient? You’ll need to experiment.

Examples