Gradient Border Generator

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

Colors: 2Border Width: 2pxBorder Radius: 8pxCSS Length: 203 chars

Presets

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.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a gradient border, which plain border properties cannot do.
Getting a gradient border that respects a border radius.
Comparing the mask and background-clip approaches.
Producing a highlighted card edge without an image.
Building a gradient outline for a focus or an active state.

Frequently Asked Questions

Why can border-color not take a gradient?: Because a gradient is an image and `border-color` takes a colour. That mismatch is the whole reason gradient borders need a workaround — there is no property that does what the name suggests, and every technique is a way around that gap.
What is the border-image approach?: `border-image: linear-gradient(...) 1` paints the gradient into the border area directly. It is the shortest method and it has one hard limitation: `border-radius` is ignored entirely, so it cannot produce a rounded gradient border.
How does the two-background technique work?: Two backgrounds with different clip boxes — the element's own colour clipped to the padding box, the gradient clipped to the border box — so the gradient shows only where the border is. It respects `border-radius`, which is why it is the usual choice.
What is the pseudo-element method for?: Cases where the background must stay transparent. An absolutely positioned `::before` with the gradient sits behind the element and is masked to a ring, which works over any backdrop — at the cost of an extra stacking context to manage.
Why does my gradient border look flat on a rounded corner?: Because a gradient interpolates in a straight line across the whole box, so a corner sees only a narrow slice of it. A conic gradient follows the perimeter instead and is what makes the colour appear to travel around the border rather than across it.

Common errors and gotchas

Expecting `border-image` to respect `border-radius`, which it does not — a mask approach is needed.
Losing the background behind the element when using a padding-box trick.
Producing a border invisible against one of the gradient's own colours.
Forgetting a solid fallback for browsers that do not support the technique.
Using it for a focus ring without checking contrast at every point along the gradient.