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

Border Properties

Quick Presets

You Might Also Like

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

Draw random playing cards from deck

Random Number Generator

Generate random numbers

Random Letter Generator

Generate random letters

Random Month Generator

Generate random months

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

  1. Choose your gradient colors using color pickers
  2. Adjust border width and radius with sliders
  3. Set gradient angle for direction
  4. Preview the result in real-time
  5. Copy the generated CSS code
  6. 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.