ZeroServer.tools

Gradient Border Generator

Create CSS gradient borders using the background-clip technique — no images needed.

Colors

Color 1

Color 2

Color 3 (optional)

Angle135°

Border Width2px

Border Radius8px

Padding16px

Preview

Gradient border preview

Edit the controls to customise

CSS

.element {
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899) border-box;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 16px;
}

Tailwind Equivalent

<div class="bg-[linear-gradient(white,white)_padding-box,linear-gradient(135deg,#6366f1,#ec4899)_border-box] border-[2px] border-solid border-transparent rounded-[8px] p-[16px]">
  <!-- content -->
</div>

How CSS gradient borders work

CSS doesn't have a border-gradient property, but the background-clip trick gets you there. The element gets two background layers: the inner one (padding-box) fills the content area with a solid colour, while the outer one (border-box) paints the gradient across the full box including the border region. Set border to solid transparent and the gradient shows through only in the border area. The technique works in all modern browsers and is fully responsive with zero JavaScript.