Your Element

Gradient Border Recipes & Quick Patterns

A library of ready-to-use gradient border combinations. Each recipe shows the rendered look, the parameters that produced it, and the exact CSS you can copy. Load any recipe directly into the generator above with one click of its preset button.

How to Use the Generator

  1. Pick gradient type — Linear for directional fades, Conic for sweeping circular effects.
  2. Add color stops — Click "+ Add Color Stop", drag the position slider to space each color.
  3. Tune width, radius, padding — Most UI uses 1–4px borders with 8–24px corner radius.
  4. Set the inner background — This must be a solid color the gradient frames; transparency isn't possible with the rounded-corner method.
  5. Copy as CSS, Tailwind, or SCSS — Whichever your project uses.

Card & UI Recipes

Button Recipes

Color Combinations That Work

Hand-picked pairings that consistently look professional. Click any in the generator's preset grid above to load it.

Choosing Border Width

WidthWhen to use
1pxSubtle separation between cards in dense lists. Reads almost as a thin line.
2pxDefault for most UI. Visible but not heavy.
3pxMarketing emphasis — hero cards, pricing highlights, callout boxes.
4–6pxConic gradients only — they need thickness for the sweep to be visible.
8px+Display/poster effects, not production UI.

Tailwind Setup

Tailwind doesn't have a gradient-border utility out of the box. The generator's Tailwind output uses arbitrary value syntax which works without any config changes. If you want a reusable utility, add this to your tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-border-neon': 'linear-gradient(#0a0a0f, #0a0a0f) padding-box, linear-gradient(135deg, #7c6fff, #ff6fb0) border-box'
      }
    }
  }
}

Then use as class="border-2 border-transparent bg-gradient-border-neon".

Troubleshooting

Want the full theory behind gradient borders — how each technique works, why CSS doesn't support them natively, and the evolution from border-image to the modern double-background method? Read our in-depth article: The complete guide to CSS gradient borders →

Tool last updated:

Frequently Asked Questions

Why doesn't CSS have a native gradient border property?

CSS simply never standardised it. The border-color property only accepts solid colors. The workarounds — border-image for sharp corners, and the double-background background-clip technique for rounded corners — are the current best practice until a native solution lands in the spec.

Which method should I use — border-image or background-clip?

Use border-image when you don't need rounded corners — it's simpler and has better browser compatibility. Use the background-clip (padding-box / border-box) method when you need border-radius, since border-image ignores border-radius entirely. The generator switches between these automatically based on your corner-radius setting.

Can I animate a gradient border?

Yes. The most reliable approach is to animate background-position on an oversized gradient: set background-size: 300% 300% and use a @keyframes animation on background-position from 0% 50% to 100% 50%. For a rotating conic border, animate the conic-gradient angle using the @property API with a registered custom property.

Why does my gradient border look pixelated on retina screens?

Use whole-pixel border widths — avoid values like 1.5px which render inconsistently across devices. Also ensure you're not applying sub-pixel transforms on the element. A clean 2px or 3px border will always render crisply at any DPR.

Does gradient border work in all browsers?

Both techniques work in all modern browsers — Chrome, Firefox, Safari, and Edge. The background-clip: border-box method has been supported since Chrome 1, Firefox 3.5, and Safari 3. No polyfills needed. The only edge case is very old Safari (pre-14) where you may want to add -webkit-background-clip alongside the standard property.

Can I use a gradient border with a transparent background?

Not with the background-clip method — it requires a solid inner background color to mask the outer gradient layer. If you genuinely need transparency inside the element, use an SVG with a stroke that references a <linearGradient> definition, or an absolutely-positioned pseudo-element with a solid background behind it.