Gradient Border Generator
Create a border filled with a gradient using CSS, and copy the code.
A border that isn't one colour
A gradient border — where the outline blends between colours rather than being a flat colour — is an eye-catching accent for cards, buttons and highlights. This generates the CSS for it and copies the code, so you can add a colourful gradient edge without wrestling the slightly indirect technique.
Pick your colours and copy the gradient-border CSS.
The technique, and using it well
Gradient borders take a little trickery because the border property itself does not accept a gradient, so the effect is usually achieved by layering a gradient background behind the element and letting it show only at the edges, or with newer border-image techniques. This is exactly why generating the code helps. As an accent, a gradient border draws the eye nicely to a featured card or a primary button, and pairs well with the gradient fills common in modern design. Like most striking effects it works best used sparingly — a gradient border on one highlighted element stands out, while gradient borders everywhere lose their impact and look busy. Kept as a deliberate accent, it adds a premium touch.
Frequently asked questions
Why is a gradient border tricky in CSS?
The border property does not accept a gradient directly, so it is achieved by layering a gradient behind the element or with border-image techniques.
How should I use a gradient border?
As a deliberate accent on a featured card or primary button — sparingly, since gradient borders everywhere lose impact and look busy.
Is anything uploaded?
No. The code is generated in your browser.