Beautiful design
Gradient Border
Create stunning gradient borders with pure CSS.
Get StartedPreview Element:
1. Gradient Type
Direction
deg
2. Color Stops
%
%
%
%
%
%
3. Border Settings
px
px
Border Position
4. Element Background
5. Effects (Optional)
CSS Output
.gradient-border {
border: 4px solid transparent;
border-radius: 16px;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%) border-box;
}Popular Presets
About CSS Gradient Border Generator
Create beautiful gradient borders for cards, buttons, and UI elements. Customize colors, width, radius, and effects, then copy the CSS instantly.
Related Tools
More free CSS generators you might like.