Gradient Border Generator

Create gradient borders using padding-box and border-box backgrounds. Control width, radius, angle and up to three colours.

Tool

Text & Shapes/Gradient Border

Gradient Border

A crisp gradient frame around any content.

Border Widthpx

Radiuspx

Angle°

Color 1

Color 2

Color 3

Inner Background

.gradient-border {
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(135deg, #7c3aed, #db2777, #06b6d4);
}
.gradient-border > .inner {
  border-radius: 15px;
  background: #0f1117;
  padding: 24px;
}

<!-- HTML: <div class="gradient-border"><div class="inner">Content</div></div> -->

/* Alt (single element, no wrapper): */
.gradient-border-2 {
  border: 3px solid transparent;
  border-radius: 18px;
  background: linear-gradient(#0f1117, #0f1117) padding-box, linear-gradient(135deg, #7c3aed, #db2777, #06b6d4) border-box;
}

About the gradient border generator

border-color cannot take a gradient, so gradient borders are built another way: paint a solid background clipped to the padding box, paint the gradient clipped to the border box, and the gradient shows only in the border ring.

The generator exports both the wrapper technique and the single-element background-clip technique, so you can pick whichever fits your markup.

How to use it

1Set the border width and the corner radius.
2Choose the gradient angle and colours.
3Set the inner background so it matches whatever the element sits on.
4Copy the CSS.

Worth knowing

The single-element version uses two backgrounds with different clip values and needs no wrapper element.
The inner background must match the surface behind it or the border will look like a frame with a gap.

Questions

Why can't I just use a gradient in border-color?

Because border-color only accepts colours. Gradients are images, so they have to be applied through background layers or border-image instead.

Which method should I use?

The single-element background-clip version is cleaner and needs no extra markup. Use the wrapper version if you need different corner radii on the inner content.

Can the gradient border be animated?

Yes. Animate background-position on the gradient layer for a moving or rotating border effect.