What is the CSS Gradient Border Generator?
Generate gradient borders that support border-radius using the pseudo-element background-clip technique. Copy CSS that actually works.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Gradient Border Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Set gradient colours and angle
Choose start and end colours and the gradient direction. This gradient becomes the border colour.
Set border thickness and radius
Enter the border thickness (inset value) and the element border-radius. The generator calculates the correct ::before border-radius automatically.
Copy the CSS
Click Copy to get the complete two-rule CSS including the position: relative and the ::before pseudo-element.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Gradient border with border-radius - pseudo-element technique */
.gradient-border {
position: relative;
background: white;
border-radius: 12px;
padding: 24px;
}
.gradient-border::before {
content: '';
position: absolute;
inset: -2px; /* border thickness */
border-radius: 14px; /* radius + border thickness */
background: linear-gradient(135deg, #6C2EF5, #f97316);
z-index: -1;
}The inset value controls border thickness. The ::before border-radius must be the element border-radius plus the inset value.
Pro tips for better results
The element must have a solid background for this to work
The technique works by layering a gradient pseudo-element behind the element. If the element background is transparent, the gradient shows through the content area.
z-index: -1 on ::before requires position on the parent
The parent element must have position: relative for z-index: -1 on the ::before to push it behind the content without disappearing completely.
Inset controls border thickness
inset: -2px extends the pseudo-element 2px beyond the element on all sides, creating a 2px border. inset: -4px creates a 4px border. Use negative values.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.