Gradient Border Generator

Why gradient borders are awkward in CSS

border-color only takes a colour, never a gradient, and border-image — which does take one — ignores border-radius, so it only works on square corners. Every rounded gradient border you have seen uses one of two workarounds, and this tool writes both for you.

Solid inside: two backgrounds, one element

Give the element a transparent border, then paint two backgrounds: the fill clipped to the padding box on top, and the gradient clipped to the border box underneath. The gradient only shows where the border is.

.gradient-border {
  border: 3px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #FF5F6D, #FFC371) border-box;
}

No extra markup, any radius, and it works in every current browser. The catch: the middle is a solid colour, so it has to match whatever sits behind the element.

See-through inside: a masked ring

When the element sits on a photo or another gradient, draw the gradient on a ::before layer and cut the middle out with mask-composite. Whatever is behind shows through the centre. Choose See-through above to get this version.

Spinning and glowing borders

• Spin rotates a conic gradient by animating a registered custom property (@property --angle). The CSS includes a prefers-reduced-motion rule that stops it for anyone who has asked their device for less motion.
• Glow adds a soft halo in the border’s own colours with box-shadow — good for a call-to-action button on a dark page.

Need just the colours? Build them in the Gradient Generator, or pick one from colour combinations.