How to create a gradient shadow in Figma & Webflow

What we'll be creating:

Figma tutorial

1) Add a frame with text. Wrap it in another frame.

Unfortunately, drop shadows can only have a solid color. No gradients allowed here.

So, the wrapper is meant to contain both the button and the make-shift button drop shadow as two separate elements.

2) Give the button a gradient fill

I decided to use an image of a mesh gradient rather than create a bespoke gradient (linear, radial etc). Don't worry both will work.

3) Duplicate the button

This duplicate will act as the drop shadow element. Make sure it's inside the wrapper. and a sibling of the button.

Feel free to make the button text transparent.

4) Add layer blur

We're trying to mimic the blurry edges of a drop shadow. Layer blur accomplishes this perfectly for us.

5) Change the blurred layer's position to Absolute and position

Send the blurry layer behind the button layer. Position and blur are your call here. Have fun with it.

Consider depth and the way shadows appear in real life to create something that makes sense.

Done!

Webflow tutorial

1) Add a button wrapper div

Unfortunately, drop shadows can only have a solid color. No gradients allowed here.

So, the wrapper is meant to contain both the button and the make-shift button drop shadow as two separate elements. Read on. It'll make sense.

Important: Give the wrapper a position of relative.

2) Add a link block

The link block is the button.

We could've used Webflow's button element but I prefer the flexibility of a link block (e.g. a link block allows me to add an icon to the button)

3) Add button text inside the link block

Styling the link block to get rid of the default text underline and text color.

4) Add gradient background

We're applying this to the button element (not its wrapper).

I decided to go for a mesh gradient image but we could've just as easily add a regular old linear gradient.

5) Style the button as desired

Add padding, style the text to enhance contrast and readability. Round the corners.

6) Duplicate the button

Make sure the duplicate is a child of the button wrapper and a sibling of the button.

7) Give the button a Position of Relative and the duplicate a Position of Absolute

The button z-index should be greater than that of its duplicate. Z-index handles depth and will in this case allow us to layer the two buttons. We want the make-shift drop shadow to be behind the button.

Also, ensure the z indices should be positive.

8) Position the duplicate behind the button

9) Add layer blur

Done!