🔲Gradient Border Generator

About this tool

Choose the technique (background clip for solid cards, or mask for a transparent inside), linear or conic gradient, border width, radius, angle and colours, and optionally make a conic border spin. Copy the CSS and HTML from the live preview.

Two ways to get rounded gradient borders

The obvious approach, border-image, ignores border-radius, so its corners are always square. The background-clip method sets a transparent border and stacks two backgrounds: a solid fill clipped to the padding box on top, and the gradient on the border box underneath, so only the border area shows the gradient. It's short, robust and supported everywhere, but needs a solid background colour inside. The mask method puts the gradient on a ::before pseudo-element covering the box, with padding equal to the border width, and uses CSS masks with mask-composite: exclude to cut out the middle. The inside stays transparent, which is good over images or other gradients. A spinning conic border animates a registered custom property (@property --angle) from 0 to 360 degrees, which browsers can interpolate smoothly, and the animation is disabled under prefers-reduced-motion. Honest limits: @property is needed for the animation (supported in all current browsers; older ones show a static border). The mask method needs the -webkit-mask prefixes for Safari, which are included. Spinning borders draw attention, so use them sparingly. The CSS gradient generator, the text gradient generator and the border radius generator are related.

Frequently asked questions