A Neat CSS Trick to Add a Gradient Border to a Button

I’m going to keep this short. As someone who shuttles between Figma and code, I’ve always wondered why it’s not as easy to add a gradient border around a button in code as it is in Figma. Okay, I might be exaggerating a little, because there is the border-image property. But with that, you can’t tweak the border-radius of the button, and you are stuck with an aggressive-looking button.

I recently stumbled upon a YouTube video by the CSS goat Kevin Powell and learned a neat trick to do exactly this. I thought I’d write about it since I believe it is a lesser-known trick and might end up helping you too. Let’s dive in, shall we?

Setting up the button

Note: To keep it simple, I’ll assume the button sits on a white background. If you want your button to adapt to any background, you can use CSS variables. Check out my beginner’s guide to CSS variables if you aren’t familiar with them.

Let’s imagine our button class is .gradient-border-btn. First, we’ll add some padding so the button text doesn’t suffocate. Next, we’ll add a border. We’ll make it transparent because our goal is to create a gradient border.

.gradient-border-btn {
  padding: 1rem;
  border: 4px solid transparent; /* transparent because we will create a gradient border */
}

Layering gradients for the border

This is where it gets interesting. With padding and a transparent border in place, we have defined a padding and border region for the button. We can now use these regions by layering two linear gradients as the button’s background.

The first gradient covers the button up to the padding, and the second covers the entire button, including the border. The first layer is a plain gradient (white to white), while the second contains the actual gradient for the border.

.gradient-border-btn {
  padding: 1rem;
  border: 4px solid transparent;
  background: linear-gradient(var(white, white) padding-box,
              linear-gradient(to right, #fb5607 20%, #ff006e 60%, #8338ec 100%) border-box);
}

We use a white-to-white gradient to match the assumed background color.

Note: The order of gradient layers matters because CSS paints backgrounds from top to bottom. The first layer in the list appears on top.

Round them corners

We have successfully created a button with a gradient border. Now you can round it as much as you like.

.gradient-border-btn {
  padding: 1rem;
  border: 4px solid transparent;
  background: linear-gradient(var(white, white) padding-box,
              linear-gradient(to right, #fb5607 20%, #ff006e 60%, #8338ec 100%) border-box);
  border-radius: 50vw;
}

The longhand version if you prefer that

I used the shorthand background property because it’s shorter (you don't say), but the longhand version is definitely easier to read

.gradient-border-btn {
  padding: 1rem;
  border: 4px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(to right, #fb5607 20%, #ff006e 60%, #8338ec 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

Here, background-origin sets where each gradient layer starts, and background-clip decides how far each layer can paint.

Tailwind bonus

If you love Tailwind CSS as much as I do, here’s how to do it

<button class="p-4 border-4 rounded-full bg-[linear-gradient(var(white,white)_padding-box,_linear-gradient(to_right,#fb5607_20%,#ff006e_60%,#8338ec_100%)_border-box)]">
  Gradient Border Button
</button>

You’ve officially levelled up your button game. Play around with colours, round those corners, and make your buttons pop.