CSS Gradient Border Generator

CSS does not allow gradients to be set directly on the border-color property, so gradient borders require a workaround. The most widely used method is to set border: none, apply a background-image with your gradient, and use background-clip: padding-box combined with background-origin: border-box to confine the fill to the padding area while the gradient shows through in the border zone. A cleaner modern approach uses border-image with a gradient value and border-image-slice: 1, though this approach does not support border-radius. For rounded gradient borders, the recommended technique uses a ::before pseudo-element with an absolutely positioned gradient background, placed behind the element using z-index: -1 and inset with a negative margin or padding to simulate the border thickness.

This is a known CSS limitation. The border-image property and border-radius are incompatible - when both are applied to the same element, border-radius is ignored and the corners remain square. The browser specification intentionally does not support their combination. If you need both a gradient border and rounded corners, use the ::before pseudo-element technique instead: give the pseudo-element the gradient background, match the border-radius on both the parent and pseudo-element, and use padding on the parent to expose the gradient layer as a visible border.

A linear gradient border transitions colors along a straight line at a defined angle - for example, left to right, top to bottom, or any diagonal. It is the most common choice for gradient borders and suits most buttons, cards, and containers. A radial gradient border radiates colors outward from a central point in a circular or elliptical pattern. This creates a more organic, glowing effect that works well for circular elements or when you want the color to appear to emanate from the centre of the border. Both can use any number of color stops and can repeat using the repeating-linear-gradient or repeating-radial-gradient functions.

CSS cannot directly animate gradient values because gradients are treated as images rather than color values, and browsers cannot interpolate between two gradient images. However, you can achieve animation-like effects using a few workarounds. One approach is to animate the background position on a larger gradient background using background-size and @keyframes, creating the illusion of a moving gradient. Another common technique is to use a conic-gradient rotated via a CSS custom property and a @property registered with @property (Houdini), which allows the angle to be animated smoothly in browsers that support it.

The easiest cross-browser approach for a button with a gradient border and a solid fill is to wrap the button in a container that carries the gradient, and set the button's background to match the page background with a small inset. Alternatively, apply the gradient directly to the button using the pseudo-element technique: set position: relative on the button, then add a ::before pseudo-element with position: absolute, a negative inset equal to the desired border width, the gradient as its background, a matching border-radius, and z-index: -1. The button's own solid background then sits on top, leaving only the gradient pseudo-element visible around the edges as the border.

The core techniques are well supported across all modern browsers - Chrome, Firefox, Safari, and Edge all handle border-image with gradient values and the pseudo-element approach reliably. The main exception is the @property Houdini approach for animated gradient borders, which is not yet supported in Firefox as of early 2025. For the widest compatibility, the pseudo-element technique with a ::before or ::after layer is the safest choice, as it relies only on standard positioning and background properties that have been supported for many years.

With the border-image approach, thickness is set using the standard border-width property. With the pseudo-element approach, thickness is controlled by the padding on the parent element (which determines how much of the gradient layer is exposed around the inner content area) or by the negative inset value on the pseudo-element itself. Either way, increasing the value makes the border visually thicker. Most generators, including this one, let you adjust thickness with a slider and reflect the change instantly in the generated code.

Yes. CSS gradients support any number of color stops, so you can use three, four, or more colors in a single gradient border. Each color stop can also have a specific position defined as a percentage or length, giving you precise control over where transitions happen. For example, a three-color gradient from red through yellow to blue would be written as linear-gradient(to right, red, yellow, blue). Adding more stops creates richer, more complex transitions - or sharp color bands if you place two stops at the same position.