A gradient border effect built with pure HTML and CSS that applies a smooth multi color outline around elements. It enhances visual edge contrast and modern decorative styling without affecting layout structure.
Usage
Use this component when interfaces require vibrant edge emphasis, such as feature cards, highlighted panels, call-to-action sections, or creative UI layouts that benefit from gradient styling.
Implementation
The effect is implemented using CSS gradient backgrounds combined with border masking or layered pseudo elements, allowing seamless color transitions along the edges. Responsive styling ensures consistent rendering across breakpoints.
HTML
<div class="ss-border gradient">Gradient Border</div>CSS
.ss-border.gradient{
padding:27px;
border-radius:11px;
background:
linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
linear-gradient(90deg, #6366f1, #22d3ee) border-box;
border:2px solid transparent;
color:var(--card-text);
}
:root{
--card-bg:#ffffff;
--card-text:#0f172a;
}
@media (prefers-color-scheme: dark){
:root{
--card-bg:#020617;
--card-text:#e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses gradient based edge styling
- Enhances decorative border clarity
- Fully responsive across breakpoints
- Suitable for cards and highlight sections
- Easy to customize gradient direction and thickness
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.