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. Preview Color Stops + Add Color Stop Gradient Direction ↑ 0° ↗ 45° → 90° ↘ 135° ↓ 180° ↙ 225° ← 270° ↖ 315° Custom Angle ° Border Settings Border Width 3px Border Radius 12px Padding 20px CSS Technique background-clip (recommended) border-image Uses background-clip: padding-box with a gradient background behind — supports border-radius and all browsers. ...