EspañolCSS gradient border generator
Choose the colors, thickness and corners. The code uses two background layers, the approach that keeps border-radius working.
How to useA colorful gradient border
Available in: 
CSS gradient border generator: what it is for
The obvious way to make a gradient border, border-image, ignores rounded corners. This generator uses the two-background-layer technique (padding-box and border-box), which keeps border-radius, or a mask with mask-composite when the card needs a transparent background.
Choose two or three colors, the angle, the thickness and the corners, and optionally the spinning border, made with conic-gradient and an angle variable registered with @property, turned off for people who asked for less motion.
How to use
- Choose the colors and angle.
- Adjust thickness, corners and background.
- Copy the CSS and apply the class.
When to use it
- Highlighted plan card.
- Profile photo with a colorful border.
- Main call to action button.
Frequently asked questions
Why not use border-image?
With border-image the gradient works, but rounded corners (border-radius) are ignored. The technique in this generator paints the gradient as a second background layer that only shows in the border area, and then the corners stay round.
What if the card background is transparent?
Tick the transparent background option: the code then uses a mask to cut out the middle, and whatever is behind the card shows through inside the border.
How does the spinning border work?
The gradient is conic and the angle is a variable registered with @property, which CSS can animate. For people who asked for less motion, the animation is turned off.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.