CSS Gradient Border Generator

Craft beautiful gradient borders in seconds — choose colors, adjust direction, width, and radius, then copy the clean CSS code instantly. No libraries, no login required.

How to Use the CSS Gradient Border Generator

Pick your colors — Click any color swatch to open the color picker, or type a hex code directly. You can add up to 5 color stops using the “+ Add Color Stop” button, and remove any stop with the × button (minimum 2 required).

Adjust position — Use the position slider next to each color stop to control where each color begins in the gradient (0–100%).

Choose direction — Click any of the 8 preset direction buttons (0°, 45°, 90°, etc.) or drag the custom angle slider for precise control from 0° to 360°.

Set border properties — Use the sliders to control border width (1–10px), border radius (0–50px for rounded corners), and padding inside the border.

Select CSS technique — Choose between two approaches:

• background-clip (recommended): Wraps content in a container with a gradient background. Works with border-radius and all modern browsers.
• border-image: A simpler single-element approach, but does not support border-radius.

Apply a preset — Click any preset tile in the gallery to instantly apply a curated color combination.

Copy the CSS — Click “Copy CSS” to copy the generated code to your clipboard. Paste it directly into your stylesheet.

CSS Gradient Border Techniques Explained

background-clip Method

The most versatile approach. The outer element has a gradient background and border-radius, while the inner element has a white (or any color) background with a slightly smaller radius:

.gradient-border {
  padding: 20px;
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
  border-radius: 12px;
}

.gradient-border-inner {
  background: #fff;
  border-radius: 9px;
  padding: 3px;
}

border-image Method

Simpler HTML — a single element — but border-radius is not supported:

.gradient-border {
  border: 3px solid transparent;
  border-image: linear-gradient(90deg, #6366f1 0%, #ec4899 100%) 1;
}

For transparent backgrounds or dark-mode designs, the background-clip: padding-box technique combined with a pseudo-element (::before) is another popular approach that gives full radius support.

Related CSS Tools

• CSS Gradient Generator — Linear, radial, and conic gradients
• Border Radius Generator — Visual corner radius editor
• CSS Animation Generator — Keyframe animations without the syntax hassle