How to Add Border Gradient in CSS [+3 Tools]

Hey there! Have you ever wanted to create eye-catching borders with smooth color changes? Well gradients are a great way to do this in CSS.

In this post, I‘ll guide you step-by-step through different techniques to add gradient borders to your projects.

What is a Border Gradient?

Let‘s start with the basics – a border gradient applies a gradient transition to an element‘s border.

For example, this box has a linear gradient border that fades from purple to green:

The border smoothly transitions between colors rather than being a solid color.

This creates a nice visual effect and can really make elements on a page pop!

Based on 2021 surveys from CSS-Tricks, over 60% of web developers use CSS gradients in their projects. They add a stylish look with minimal effort.

Some key benefits of border gradients:

• Draw attention – The color changes grab user focus
• Aesthetic appeal – More exciting than boring solid borders!
• Subtle depth – Gradients can add light/shadow effects

Now let‘s dive into the different ways to make them.

Using Linear Gradient Borders

Linear gradients are a great way to spice up borders. They transition colors along a straight line.

For example, you can fade from red to blue diagonally:

.linear-gradient-border {
  border: 10px solid;
  border-image: linear-gradient(to bottom right, red, blue);
}

This creates a diagonal red to blue border:

The to bottom right sets the direction to go diagonally. You can use angles like 45deg too.

Some other tips:

• Add multiple color stops for more complex gradients
• Use transparency for faded color transitions
• Animate the gradient angle for cool effects!

Linear gradients are supported by over 95% of browsers, so they‘re very safe to use.

Next let‘s look at…

Using Radial Gradient Borders

For a playful bubbly effect, you can use radial gradients. These radiate outwards in a circle from a central point.

Here‘s an example with a radial gradient border:

.radial-border {
  border: 20px solid;
  border-image: radial-gradient(circle, yellow, green);  
}

This creates a rounded gradient border:

The circle keyword makes it a circular shape. You can also make ellipses with ellipse.

I like using radial gradients for buttons, profile pictures, or elements with a spotlight effect.

The gradual color change draws attention in a fun way!

Up next, we have…

Using Conic Gradient Borders

If you want a psychedelic 70s vibe, conic gradients are your friend!

These wrap around an element in a cone or circle shape. Let‘s try one:

.conic-border {
  border: 15px solid;
  border-image: conic-gradient(pink, orange, blue);
} 

This conic gradient cycles through pink, orange, and blue:

The colors transition as you go around the circle. Groovy!

Conic gradients work great for avatars, badges, or social media icons. Anything with a circular shape.

You can control the angle the gradient starts from too.

Up next – using images for complex gradients…

Using Border Images

For greater customization, you can use an image or SVG file to define the gradient.

This allows more complex multi-color gradients that are hard to make purely in CSS.

For example:

.border-img {
  border: 25px solid;
  border-image: url(border-gradient.png);
}

This applies a premade gradient border image:

The benefit of border images is you have full control over the gradient effect.

You can add shadows, use transparency, and change the colors later with your image editor. No CSS needed!

The one catch is that border images have less browser support than pure CSS gradients. So keep that in mind.

One more handy trick before we look at generators…

Using the border-image Shorthand

Writing long gradient declarations in CSS can be tiring.

Luckily, there‘s a shorthand border-image property that combines settings into one line:

/* Longhand version */
.longhand {
  border-image-source: url(gradient.png);
  border-image-slice: 30;
}

/* Shorthand version */  
.shorthand {
  border-image: url(gradient.png) 30; 
}

Much cleaner! This shorthand works for all gradient types too.

For readability, always use border-image shorthand when you can.

Okay, last up: super helpful tools!

Gradient Border Generators

Creating gradients entirely by hand can be tricky.

Luckily there are handy generator tools that make it much easier!

Let‘s look at a few I recommend:

CSSGradient.io

CSSGradient has an intuitive gradient builder:

You pick colors from a palette, adjust angles and stops, and it generates the code.

It even has a dedicated border section for copying the declaration. Super slick!

GradientMagic.io

GradientMagic has a simple gradient interface:

You set 2-3 colors and it handles the complex CSS stuff behind the scenes.

There are also handy options for border width, radius, and more.

AngryTools

And finally, AngryTools has a great border gradient generator:

It lets you really customize the gradient type, sizing, colors, and shape.

The handy copy-paste code boxes make using it a breeze.

Take Your Pick!

Those are just a few of my favorite gradient generators out there. Play around and see which you like best!

Let‘s Recap…

We covered a lot of ground looking at different ways to make gradient borders in CSS:

• Linear gradients transition colors in a straight line
• Radial gradients radiate out from a central point
• Conic gradients cycle around in a cone or circle
• Border images allow using a custom gradient graphic
• The border-image shorthand condenses all the code
• And generator tools make the whole process faster!

With all these techniques, you have so many options for creating beautiful gradient border effects.

Try adding gradients to buttons, pictures, sections, and more on your sites. They‘re a great way to add style!

I hope this guide gets you excited to use gradients in your next project. Feel free to reach out if you have any other questions!