Gradient Border Generator

Create beautiful gradient borders using CSS. Adjust colors, width, and radius with live preview.

Gradient Border Preview

This box has a gradient border

Color 1

Color 2

Angle: 90deg

Border Width: 3px

Border Radius: 12px

CSS Code

.gradient-border {
  border: 3px solid transparent;
  border-radius: 12px;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(90deg, #a855f7, #ec4899) border-box;
}

How CSS Gradient Borders Work

CSS does not natively support gradient border colors. The technique uses a combination of border: transparent with background set to two layers: a solid background color clipped to the padding box, and a gradient clipped to the border box. The transparent border reveals the gradient layer underneath.

The Background Trick

The key CSS technique is: background: linear-gradient(white, white) padding-box, linear-gradient(...) border-box. The first layer (padding-box) covers the content area with a solid color, while the second layer (border-box) applies the gradient to the entire element including the border area.