Gradient border stack?

Is there a stack that does gradient borders?
Gradient borders on buttons?

This site has examples of some:


Not sure but you may be able to do this in Foundation 6 (if you use it) by applying a gradient swatch or css class to the border. Only other way I can think of is to use a container stack that support background gradients and then put your content stack inside, setting the margin of the content stack (or padding of the container stack) so that there is a ‘border’ of the required thickness showing the edges of the background gradient. Not tried either so just thinking aloud.

1 Like

Thanks for the suggestion, will try!

I just did this with a button in the psychedelic stack from Doobox (this has an animated gradient that changes at a speed you set but it’s similar in principle to any container stack that supports gradients). Definitely works - just need to play with the width and margin settings as they may not be equal on all sides. Also remove button border and shadow if they are options.

Screenshot 2021-04-30 at 19.39.46

1 Like

Using Source, you could create a CSS grid with the Grid Plus stack, using a custom row and column using 5px 1fr 5px for both where the 5px is the border size (adjust to taste). Put your button n the centre, i.e. col2 row 2, and then setup whatever border gradient or animated gradient or whatever effect you want to fill the grid, i.e. 3 cols and 3 rows, which will appear as the border around the button.

1 Like