Free · Fast · Privacy-first

CSS Gradient Border Generator

Standard CSS borders accept only solid colours.

⚡

Generates border-image gradient CSS for standard borders

🔒

Outputs pseudo-element technique for rounded-corner borders

✨

Choose gradient direction, colours, and border width

⚡

Free tool with instant copy-ready output

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

FreeNo signupWhite-label

Add this Gradient to your website

Drop the Gradient 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/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

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

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

Two Techniques for CSS Gradient Borders: border-image vs Pseudo-elements

CSS does not accept gradient function values in the border-color property because border-color is defined to accept only colour values, not image values. Two techniques bridge this gap with different trade-offs. The first uses border-image: set the border-image property to a gradient function and use a slice value of 1 to tell the browser to apply the gradient continuously across the border region. This is the most direct approach and requires minimal CSS. However, it is incompatible with border-radius because the CSS specification defines that border-image overrides and suppresses border-radius clipping on the same element. The second technique uses a pseudo-element as the gradient-filled background, positioned absolutely behind the parent element with a negative z-index and expanded outward by the desired border width using a negative inset value. This method supports border-radius and produces fully rounded gradient borders by setting border-radius: inherit on the pseudo-element.

The border-image technique produces CSS of this form: border: 3px solid transparent; border-image: linear-gradient(90deg, #f093fb, #f5576c) 1. The border declaration establishes the space that the gradient will fill, and the transparent colour is overridden by the border-image. The slice value of 1 after the gradient function is mandatory for continuous gradient rendering. For the pseudo-element technique, the parent element needs position: relative and a solid background colour, and the ::before pseudo-element gets position: absolute; inset: -3px; border-radius: inherit; background: linear-gradient(...); z-index: -1. The parent's solid background colour covers the central area of the pseudo-element, leaving only the outer border-width strip of the gradient visible as the border.

FixTools generates both forms of CSS based on your configuration. For straight-edged elements without border-radius, both methods produce the same visual result and either is appropriate. For elements with border-radius, use only the pseudo-element output, which is the only technique that supports rounded gradient borders in standard CSS without JavaScript.

A third newer technique deserves mention for projects that can adopt modern CSS: the background-origin and background-clip pair allows a single element to render a gradient border without a pseudo-element and with full border-radius support. The pattern uses two stacked backgrounds where the first is the solid interior colour clipped to padding-box, and the second is the gradient clipped to border-box: background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #667eea, #764ba2) border-box; border: 3px solid transparent. The transparent border declaration reserves the border area, the gradient fills that area through border-box clipping, and the white interior gradient covers everything inside the padding-box. Browser support is universal in current browsers and the markup stays clean with no extra DOM nodes. The trade-off is slightly less obvious syntax for developers unfamiliar with background-clip layering, which is why the pseudo-element approach remains common in teaching examples.

MDN border-image property reference MDN ::before pseudo-element reference

How to use this tool

💡

Configure your gradient border colours and width. Example border-image output: border: 3px solid transparent; border-image: linear-gradient(90deg, #f093fb, #f5576c) 1;

How It Works

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

1
Open the CSS Gradient Generator
Navigate to the FixTools CSS Gradient Generator using the link below. The tool opens in visual editing mode with a default gradient configured in the preview. You will configure your gradient colours for the border and then copy the technique-specific CSS output for use in your stylesheet.
2
Configure your gradient colours
Choose the gradient direction and colour stops you want for the border. For borders, high-contrast gradient pairs tend to read more clearly than subtle tonal gradients because the border is a narrow strip where the full colour spectrum needs to be visible. The preview shows the gradient at full scale to help you judge colour clarity.
3
Choose the border technique
Select the border-image output for elements without border-radius, such as rectangular data tables, flat-cornered cards, and straight-edged divs. Select the pseudo-element output for any element that uses border-radius, such as rounded cards, pill buttons, rounded input wrappers, or any element where maintaining curved corners is required alongside the gradient border.
4
Copy and apply the CSS block
Copy the complete CSS block for your chosen technique and apply it to your element class. For the pseudo-element technique, also ensure the parent element has a solid background-color set and position: relative. Without these two properties on the parent, the pseudo-element will not render correctly as a border.

Real-world examples

Common situations where this approach makes a real difference:

Feature card with gradient outline

A features grid displays white cards on a white background and needs borders to define card edges without the flatness of a plain grey border. The developer generates a subtle blue-to-purple gradient border using border: 1px solid transparent; border-image: linear-gradient(135deg, #667eea, #764ba2) 1 and applies it to the card element. The gradient border adds brand colour presence to the card edges while keeping the card interior completely clean, creating a premium look that a solid grey border could not achieve.

Rounded input field with gradient focus ring

A design system uses rounded input fields with border-radius: 8px and needs a vivid gradient focus indicator for keyboard accessibility compliance. The developer applies the pseudo-element technique to the input wrapper div: the ::before pseudo-element expands 2px beyond the wrapper using inset: -2px, has a gradient background, and is hidden by default with opacity: 0 and transition: opacity 0.2s. On :focus-within, opacity transitions to 1, revealing the gradient ring with border-radius: 10px. The effect clearly marks focused inputs while satisfying WCAG 2.4.11 focus appearance requirements.

Navigation tab active state

A horizontal tab navigation highlights the currently active tab with a gradient underline that is more distinctive than a flat colour line. The developer applies border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #f093fb 0%, #f5576c 100%) 1 to the active tab state class. The gradient underline changes colour from left to right, drawing the eye toward the selected tab without visual heaviness. The inactive tabs use either no border-bottom or a neutral grey, making the gradient active state immediately noticeable.

Pricing card highlight border

The recommended plan on a pricing page needs to stand out from the other two cards through a combination of visual signals. The developer wraps the featured card in a container div and applies the pseudo-element gradient border technique with a 2px border and border-radius: 16px matching the card corners. The gradient uses the brand primary and secondary colours. The visible gradient border on the featured card contrasts clearly with the plain grey borders on the other cards, guiding the user's eye toward the recommended option at a glance.

When to use this guide

Use this when you want a border that transitions between two or more colours rather than using a flat solid border colour.

Pro tips

Get better results with these expert suggestions:

Use border-image for performance-critical flat-cornered elements

The border-image approach renders in a single layer without requiring any additional DOM elements or pseudo-elements. For tables, data grids, form fields without border-radius, and simple rectangular cards, border-image gradient is the most efficient and maintainable technique. It composes correctly with box-shadow and does not require the parent to have a specific background colour. The CSS is shorter and easier to read, which reduces maintenance overhead when border colours need to change in future design iterations.

Use the pseudo-element technique for any element with border-radius

When border-image is applied to an element that also has border-radius, the specification defines that border-image takes precedence and border-radius is silently ignored. The corners become sharp regardless of the border-radius value, which breaks the design. If your element requires rounded corners and a gradient border together, the pseudo-element technique is the only CSS solution. Set border-radius: inherit on the ::before pseudo-element so it always matches the parent radius without requiring duplicate values that need to be updated together when the corner radius changes.

Set the parent background explicitly for the pseudo-element method

The pseudo-element gradient border works because the parent element has a solid background that covers the central area of the pseudo-element, making only the outer strip visible as the border. If the parent background is transparent or not set, the gradient fills the entire pseudo-element area and appears as a gradient background behind the element content rather than as a border. Always set background: white (or your actual background colour) explicitly on the parent element when using the pseudo-element gradient border technique.

Animate gradient borders with background-position on the pseudo-element

Direct animation of gradient colour stops is not possible in CSS, but the background-position technique works on the pseudo-element. Set background-size: 200% 200% on the ::before pseudo-element and animate background-position using @keyframes from 0% 0% to 100% 100% and back. Because only the outer strip of the pseudo-element is visible as the border, the animated gradient appears to flow around the border edges, producing a dynamic rotating or flowing gradient border animation without any JavaScript or SVG stroke techniques.

FAQ

Frequently asked questions

There are two techniques. For elements without border-radius: use border-image: linear-gradient(90deg, color1, color2) 1 on the element along with border: Npx solid transparent to create the border space. The gradient fills the border area created by the transparent border declaration. For elements with border-radius: use a ::before pseudo-element with position: absolute; inset: -Npx; border-radius: inherit; background: linear-gradient(...); z-index: -1 and give the parent position: relative with a solid background colour. FixTools generates both techniques automatically and outputs the complete CSS block for each.

The CSS specification explicitly defines that border-image overrides border-radius clipping on the same element. When both properties are applied to the same element, border-image takes precedence and the browser ignores the border-radius value, rendering sharp corners regardless of the border-radius specification. This is not a browser bug but a defined behaviour in the CSS specification. The only CSS solution for combining rounded corners with a gradient border is the pseudo-element technique, which places the gradient on a separate absolutely-positioned element that has its own independent border-radius.

Direct animation of gradient colour stops is not supported in CSS because the gradient value is not an animatable type. For the border-image technique, animation options are limited to opacity and filter changes on the element. For the pseudo-element technique, you can animate background-position on the ::before pseudo-element by setting background-size: 200% 200% and using @keyframes to cycle the position. Because only the narrow border strip of the pseudo-element is visible, the animated gradient appears as a flowing colour movement around the border edges, creating an effective animated gradient border effect with pure CSS.

The border-image-slice property controls how the border image source is divided into nine regions for application to the border area. For a gradient used as a continuous border fill, a slice value of 1 means each pixel of the image corresponds to one pixel of the border and the gradient is applied as a single continuous strip without being divided into separate corner and edge segments. Without including the slice value, the border-image may render incorrectly or not at all. The slice value 1 must always follow the gradient function in the border-image declaration: border-image: linear-gradient(...) 1.

Yes, with some browser-specific considerations. Input elements often have browser-default appearance styles that interfere with border-image rendering. Reset them first: appearance: none; -webkit-appearance: none. Then apply the gradient border technique. For inputs with border-radius, use the pseudo-element approach with the input wrapped in a parent div, because some browsers do not support ::before and ::after pseudo-elements on replaced elements like input and button. Apply the pseudo-element technique to the wrapper div and size the input to fill the wrapper completely minus the border width.

No. The border-image technique occupies the same box model space as a regular border and does not affect the layout dimensions or the flow of surrounding elements. The pseudo-element technique uses position: absolute with negative inset values to expand outside the parent's box model area, also without affecting layout flow. In both cases, the gradient border is a visual addition that sits within or just outside the element's visual boundary without pushing or pulling other elements. Ensure the parent has position: relative for the pseudo-element to position correctly, and that overflow: hidden is not applied to the parent, which would clip the outwardly-expanded pseudo-element.

CSS border-image does not apply to SVG elements. SVG uses the stroke attribute rather than CSS borders, and stroke can reference SVG gradient elements defined in a defs block. To apply a gradient to an SVG shape's outline, define a linearGradient or radialGradient element inside SVG defs and reference its id in the stroke attribute of your SVG shape: stroke="url(#myGradient)". This is the SVG-native approach. Alternatively, wrap the SVG in an HTML div and apply a CSS gradient border to the wrapper, which creates a gradient border around the wrapper rectangle rather than around the SVG shape path itself.

For the border-image technique: set the default state to a transparent border (border: 3px solid transparent) and apply the full border-image gradient declaration only in a :hover rule. The transition from no gradient to a visible gradient is instantaneous because border-image is not animatable. For the pseudo-element technique: set the ::before pseudo-element to opacity: 0 by default with transition: opacity 0.2s ease and transition it to opacity: 1 in a .parent:hover::before rule. This fades the gradient border in smoothly on hover with a configurable transition duration, producing a polished interactive state that is more refined than a hard instantaneous border change.

The gap is the parent's padding or the difference between border-box and content-box sizing. With the pseudo-element technique, if the parent uses box-sizing: content-box, the border area is added outside the content dimensions and the pseudo-element overlaps that border area cleanly. Under border-box (the default in most modern resets), the border eats into the content box and the pseudo-element may not reach the visible content edge if inset values are miscalculated. Confirm that the pseudo-element uses inset: -Npx where N matches the visible border thickness exactly, and that box-sizing is consistent between parent and pseudo-element. A 1-pixel sub-pixel gap on high-DPI screens can also result from fractional pixel rounding; use whole-pixel border widths to avoid this rendering artefact.

Yes, and this combination is often the best accessible focus indicator for elements that already have a gradient border in their default state. The outline property renders outside the element's border box and does not affect layout, so adding outline: 2px solid #4facfe; outline-offset: 2px on :focus-visible places a visible focus ring outside the existing gradient border without disrupting the design. The browser-rendered outline meets WCAG 2.4.11 focus appearance requirements when the contrast against the surrounding background is at least 3:1. Avoid removing the outline entirely or replacing it with only a colour change inside the gradient itself, because those alternatives are easier to miss for users with low vision and keyboard-only navigators.