Can I animate a CSS gradient border?

Directly animating gradient stop colors is not supported because browsers treat gradients as atomic values that cannot be interpolated. The workaround using @property registers a custom color property that the browser can animate: @property --c1 { syntax: ' '; inherits: false; initial-value: #f59e0b; }. Then use --c1 in the gradient and transition: --c1 0.3s ease. This works in Chrome 85+, Firefox 128+, and Safari 16.4+. For a simpler spinning animation, animate the gradient angle if using conic-gradient via @keyframes.

Browse tools

Free · Fast · Privacy-first

CSS Gradient Border Generator

CSS does not have a direct gradient border property, but the border-image property achieves the same visual result.

⚡

Generates complete border-image gradient declarations

🔒

Explains border-image-slice: 1 requirement automatically

✨

Shows background-clip alternative for rounded gradient borders

⚡

Live preview with adjustable gradient angle and color stops

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Border Builder to your website

Drop the Border Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

How border-image Creates Gradient Borders and Why slice: 1 Is Required

The border-image property uses an image, including a CSS gradient, as the border instead of a solid color. The full shorthand is border-image: source slice / width / outset repeat. Border-image-source sets the gradient: linear-gradient(45deg, #f59e0b, #6366f1). Border-image-slice controls how the image is divided into the nine regions used to paint the border corners and edges. A value of 1 for the slice tells the browser to use 1 unit from each edge as the slicing point. For gradients, this effectively stretches the gradient across the entire border, which is the desired behavior for a full-border gradient. Without slice: 1, the browser applies a default slice that cuts the gradient into corner and edge pieces incorrectly.

The border-image-repeat property controls how the sliced edge regions tile across the border segments. The fill keyword fills the center region of the image, which is usually not wanted for borders. The repeat value tiles the edge pieces, which can cause visible seams at corners. The stretch value stretches the edge pieces to fill the border segments, which works well for gradients because stretching a gradient produces no visible artifacts. Setting border-image-repeat: stretch is the most reliable choice for gradient borders because gradients scale smoothly.

The main limitation of border-image is that it ignores border-radius. An element with both border-radius and border-image set will display a rectangular border image, not a rounded one. The workaround uses background-clip and padding: set the element to background: linear-gradient(white, white) padding-box, linear-gradient(45deg, #f59e0b, #6366f1) border-box. The border: 3px solid transparent provides the border width and the two background layers clip to the padding box (hiding the gradient behind the content area) and the border box (showing the gradient in the border region). This technique works with border-radius because it uses background rather than border-image.

Gradient borders also intersect with shadow layers in ways worth previewing together rather than separately. A box-shadow stacked behind a gradient-bordered card needs to clear the border width and account for any border-image-outset before it becomes visible outside the element. When the gradient border is created via the background-clip workaround (rather than border-image), the element technically has a transparent solid border, which means box-shadow paints starting from the outer edge of that transparent border. Shadow offsets that are smaller than the border width get partly hidden behind the gradient. The practical fix is to bump the shadow offset to at least the border width plus one or two pixels, or to use spread instead of offset so the shadow extends uniformly outside the border on all sides. For elevated gradient-bordered cards, two shadow layers (a tight close shadow and a softer ambient one) read better than a single shadow because the gradient border already supplies the prominent visual element and the shadows should suggest depth without competing.

MDN: border-image MDN: border-image-slice

How to use this tool

💡

Choose two gradient colors and an angle, then set the border-width to 3px or 4px so the gradient is clearly visible. The tool generates the border-image shorthand with slice: 1. For rounded corners, switch to the background-clip technique shown in the output.

How It Works

Step-by-step guide to css gradient border generator:

1
Set border-width and border-style
Set border-width to 3px or 4px and border-style to solid. Border-image needs width and style to paint into. The style value does not matter visually when border-image is set, but it must be a non-none value.
2
Configure the gradient
Choose gradient colors and angle. A 45-degree angle with two contrasting colors is the clearest starting point. The generator builds the linear-gradient() function for border-image-source.
3
Confirm border-image-slice: 1
The tool sets this automatically. Verify it is in the output before copying, as it is the most commonly forgotten value that causes gradient borders to look wrong.
4
Copy the CSS
Copy the full border-image declaration. If your element uses border-radius, copy the background-clip alternative instead to get a rounded gradient border.

Real-world examples

Common situations where this approach makes a real difference:

Gradient border on a premium feature card

Highlighting a premium plan card with a gradient border distinguishes it from standard cards without a badge or label. The gradient from a warm amber to indigo creates a vibrant border that draws attention. Using border-image: linear-gradient(135deg, #f59e0b, #6366f1) 1 with border-width: 2px is concise and performant. For a rounded card with border-radius, the background-clip two-layer technique maintains the rounded corners.

Animated rainbow border on a loading card

A conic gradient border animating its start angle creates a spinning rainbow effect useful for loading states. The technique uses border-image: conic-gradient(from var(--angle), #f59e0b, #6366f1, #ec4899, #f59e0b) 1 combined with a CSS @keyframes animation that rotates --angle from 0deg to 360deg. This requires the @property rule to register --angle as an animatable value.

Gradient focus ring on interactive elements

A gradient outline on :focus-visible creates a distinctive branded focus indicator. Using box-shadow: 0 0 0 3px color-one, 0 0 0 5px color-two with two offset layers simulates a two-color layered focus ring that follows border-radius. The box-shadow approach is more reliable than border-image for focus rings because it always respects border-radius in modern browsers.

Gradient border on an input field for an AI-themed product

AI product interfaces frequently use gradient borders on input fields to signal intelligence or advanced capability. The background-clip technique is required because input elements have border-radius. Setting background: white padding-box, linear-gradient(90deg, #818cf8, #c084fc) border-box with border: 2px solid transparent produces a purple-to-violet gradient border on the input while keeping the inside white and the border-radius intact.

Pro tips

Get better results with these expert suggestions:

Conic gradients work in border-image too

Border-image-source accepts any CSS gradient function, including conic-gradient. Setting border-image: conic-gradient(from 0deg, #f59e0b, #6366f1, #ec4899, #f59e0b) 1 creates a full-spectrum rotating gradient border. Combine with a CSS animation on the gradient angle for a spinning gradient border effect on loading states or highlighted cards.

Animate gradient borders with @property and CSS Houdini

CSS gradient stops cannot be directly transitioned because browsers treat the whole gradient as a single value. Using @property to register a custom property as a color type allows the browser to interpolate it. Define @property --gradient-color-1 as a color, use it in the gradient, and transition it. This requires modern browser support (Chrome 85+, Firefox 128+, Safari 16.4+).

Border-image overrides border-color completely

Setting both border-image and border-color in the same rule means border-image takes precedence and border-color is ignored visually. This is by specification. If you want a fallback for browsers that do not support border-image, set border-color first and then border-image: the browser will use border-image if supported and fall back to border-color if not.

Use border-image-outset to extend the border outside the element

Border-image-outset specifies how far the border-image extends beyond the border edge. A value of 2px pushes the gradient border outward without affecting layout (similar to outline behavior). This is useful when you want the gradient border to appear as a floating ring around a card rather than sitting directly at the element edge.

Always set border-image-slice to 1 for gradient borders

The default slice value cuts gradient images into nine pieces that produce distorted corner colors. Setting border-image-slice: 1 tells the browser to use a 1-unit slice from each edge, which effectively stretches the gradient across all four sides continuously and is the correct behavior for gradient borders.

Use background-clip technique for rounded gradient borders

Border-image does not respect border-radius. Use the two-layer background trick instead: set a solid transparent border for the width, then use background with both a solid-color padding-box layer and a gradient border-box layer to create a rounded gradient border.

Set border to transparent with border-image

When using border-image, also set border: solid transparent (or any style) to establish the border width. Border-image overrides border-color but still needs border-width and border-style to be set. Without them, the border-image has no space to paint into.

FAQ

Frequently asked questions

The standard technique uses the border-image property with a CSS gradient as the source. Set border: 3px solid transparent to establish the width, then add border-image: linear-gradient(45deg, #f59e0b, #6366f1) 1. The number 1 at the end is border-image-slice, which must be set for the gradient to render correctly across the full border. For elements with border-radius, use the background-clip technique instead: background: white padding-box, linear-gradient(45deg, #f59e0b, #6366f1) border-box.

Border-image-slice defines how the border image is divided into the nine regions that paint border corners and edges. For a gradient source image, a slice value of 1 tells the browser to take only 1 unit from each edge as the slice boundary, which effectively uses the entire gradient image to paint each border segment. Without slice: 1, the browser applies a default 100% slice that cuts the gradient into corner and edge pieces, producing distorted colors rather than a smooth gradient across the full border.

Border-image ignores border-radius by specification. When both are set on the same element, the border renders as a rectangle regardless of the border-radius value. The workaround is the background-clip technique: set border: 2px solid transparent for the width, then background: white padding-box, linear-gradient(45deg, #f59e0b, #6366f1) border-box. This uses two background layers that clip to the padding box and border box respectively, creating a gradient in the border region while respecting border-radius.

Not directly. The CSS specification states that border-image overrides all border-radius corner rendering. If both properties are set, border-image takes precedence and the corners render as right angles. The background-clip two-layer technique is the established workaround for gradient borders on rounded elements. Alternatively, you can use a box-shadow with a large spread in a gradient-like color pair to simulate a gradient border that follows border-radius, though true gradient stops are not possible with box-shadow.

For gradient borders, stretch is almost always the better choice. Stretch scales the gradient edge pieces to fit the border segment, producing a smooth continuous gradient. The repeat value tiles the edge pieces, which can create visible seams and repeated color bands at corners and junctions. Gradients stretch smoothly because scaling a gradient simply recalculates the color stops across the new length, while tiling repeats the pattern and can show discontinuities.

Directly animating gradient stop colors is not supported because browsers treat gradients as atomic values that cannot be interpolated. The workaround using @property registers a custom color property that the browser can animate: @property --c1 { syntax: '<color>'; inherits: false; initial-value: #f59e0b; }. Then use --c1 in the gradient and transition: --c1 0.3s ease. This works in Chrome 85+, Firefox 128+, and Safari 16.4+. For a simpler spinning animation, animate the gradient angle if using conic-gradient via @keyframes.

Border-image-outset specifies how far the border image extends beyond the border edge, into the margin area. A value of border-image-outset: 4px pushes the border image 4px outward from the border box. Unlike outline, border-image-outset is not rendered over the margin but actually occupies space there without affecting layout. This is useful for glowing or wide decorative border effects where you want the border image to be larger than the actual border-width suggests.

Border-image has broad support across all modern browsers. It is supported in Chrome 15+, Firefox 15+, Safari 6+, and Edge 12+. The unprefixed property is safe for all current browser versions without vendor prefixes. The -webkit-border-image prefix was required in older Safari versions before Safari 6 and is not needed for any currently supported browser. The background-clip: border-box technique used as a workaround for rounded gradient borders is also broadly supported in all modern browsers. The newer mask-composite property, which simplifies the multi-layer gradient border recipe, has reliable support in Chrome 120+, Safari 15.4+, and Firefox 120+, so feature-detect with @supports (mask-composite: exclude) before relying on it in production stylesheets, and keep the classic background-clip recipe as the fallback path for older browser versions still in active use.

The two layers stack cleanly but need to be tuned together to avoid the shadow being partially eaten by the border. Box-shadow paints from the outer edge of the element, so a thin shadow with a small offset can sit partly behind a thick gradient border, especially when the gradient border is implemented via the background-clip workaround using a transparent solid border. Bump the shadow offset to at least the border-width plus one or two pixels, or use spread instead of offset to push the shadow uniformly outward on all sides. For elevated gradient cards, a two-layer shadow (a tight close shadow plus a softer wider one) reads better than a single shadow because the gradient itself is already the prominent visual element. The shadows should suggest depth quietly; if they compete with the gradient for attention the card looks busy rather than refined.

Clip-path can produce shapes border-image cannot reach (hexagons, arrows, speech bubbles) but it strips away the rendering features that make a gradient border useful. A clipped element has no visible border outline, no box-shadow (the shadow is clipped along with everything else), and no native outline-based focus indicator. For a non-rectangular shape that needs a gradient outline, you typically need to layer two elements: an outer element with the clip-path producing the shape and a background gradient that serves as the visible border, plus an inner element with the same clip-path inset slightly that masks the center back to the content colour. That works but doubles the markup. For standard rectangular and rounded shapes, the background-clip workaround for gradient borders is simpler, keeps shadows and focus rings intact, and is the right default choice.