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: