Gradient outline as inward bevelled edge

How to use it

Add a border around an element, and apply a gradient to the border, starting from dark at the top to light at the bottom (Assuming a top-down light source)

When to use it

If you want to create a "frame" effect around an element, like adding a frame around a photo, you can make it look like it has an inward chamfered edge by using a gradient. This is because in real life, light coming from the top would hit the bottom edge more, making it look lighter, and the top edge less, making it look darker.

What to watch out for

If you're using a gradient on the element as well, like in the example below, it can be hard to achieve this effect because of how the colour in the element interacts with the colour in the outline. It might take some tweaking.

Examples