CSS Gradient Border Generator

Create gradient-colored borders with width, direction, and radius controls

Live Preview

See your gradient border in action

Gradient Border

4px width

16px radius

Generated CSS

Copy and use in your projects

.gradient-border {
  border: 4px solid transparent;
  border-radius: 16px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
  -webkit-mask: 
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Alternative method using pseudo-element */
.gradient-border-alt {
  position: relative;
  border-radius: 16px;
  padding: 4px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

.gradient-border-alt::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  background: white;
}

Gradient Colors

Color 1

Color 2

Use 3 colors

Border Properties

Border Width: 4px

Border Radius: 16px

Gradient Angle: 45°

Quick Presets

About CSS Gradient Border Generator

Create Beautiful Gradient Borders

Generate CSS code for stunning gradient borders with full control over colors, width, radius, and direction. Two implementation methods provided: mask-based and pseudo-element approach. Perfect for modern web designs and UI components.

Features

Live gradient border preview
2 or 3 color gradients
Color picker and hex input
Adjustable border width (1-20px)
Adjustable border radius (0-100px)
Gradient angle control (0-360°)
Two CSS implementation methods
6 beautiful preset gradients
Copy CSS code to clipboard
Reset to defaults

Implementation Methods

Mask Method: Uses CSS mask to create gradient border effect. Works well for transparent backgrounds.
Pseudo-element Method: Uses ::before pseudo-element with background. Better browser support, works with solid backgrounds.

How to Use

Choose your gradient colors using color pickers
Adjust border width and radius with sliders
Set gradient angle for direction
Preview the result in real-time
Copy the generated CSS code
Paste into your CSS file

Use Cases

Card components with gradient borders
Button hover effects
Profile pictures and avatars
Feature sections and panels
Modern UI elements

Browser Support

The mask method works in modern browsers (Chrome, Firefox, Safari, Edge). The pseudo-element method has wider support. Test both methods to choose the best one for your use case.

Explore more tools in this category

Email Extractor

Extract and validate email addresses from any text

Lottery Number Generator

Generate random lottery numbers for Powerball, Mega Millions, and more

CURL Command Generator

Build CURL commands visually with all options

Speed Test

Test your internet download and upload speed

Random Team Generator

Split people into random teams

Random Card Generator