CSS Border Gradient Generator
Generate CSS gradient border code instantly with a live preview.
135°
0%
100%
Preview
CSS Code
.element {
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
border: 3px solid transparent;
border-radius: 12px;
}What is a CSS Border Gradient?
CSS does not natively support gradient border colors via border-color. To apply gradient borders, this tool uses the background-clip trick — layering two backgrounds clipped to padding-box and border-box respectively.
Gradient Types
Linear Gradient
Colors transition along a straight line at a specified angle. Great for directional effects like top-to-bottom or diagonal borders.
Conic Gradient
Colors rotate around a center point. Applied to a border, this creates a rainbow or spinning effect that wraps around the entire element.
How to Use
Select a gradient type (Linear or Conic), set the angle and color stops, adjust border width and radius, then copy the generated CSS code.
Frequently Asked Questions
Can I apply a gradient directly to border-color?
No. CSS border-color only supports solid colors. This tool uses the background-clip trick to create gradient borders without any JavaScript.
What is the difference between linear and conic gradient borders?
Linear gradient borders flow in one direction (e.g. top to bottom). Conic gradient borders rotate around the element, making all colors visible along the entire border.
Are gradient borders supported in all browsers?
The background-clip method works in Chrome, Firefox, Safari, and Edge modern versions. Internet Explorer is not supported.
How do I use a gradient border with Tailwind CSS?
Tailwind does not support gradient borders natively. Add the generated CSS to @layer utilities or apply it as an inline style.
What is a conic gradient border?
A conic gradient border uses a conical gradient — rotating colors around a center point — for a rainbow or spinning effect on the border.
Can I animate a gradient border?
Yes. You can animate the conic-gradient angle using @keyframes and CSS custom properties to create a spinning gradient border effect.