Gradient Stroke Border

A gradient stroke border built with pure HTML and CSS that applies a smooth color transition outline around elements. It enhances decorative edge styling and visual vibrancy within modern UI layouts.

Usage

Use this component when interfaces require colorful outline emphasis, such as feature cards, call-to-action panels, portfolio sections, or highlighted UI components that benefit from gradient edge styling.

Implementation

The effect is implemented using CSS gradient backgrounds combined with border masking or layered pseudo elements, allowing smooth color transitions along the stroke. Responsive styling ensures consistent alignment across screen sizes.

HTML

<div class="border-gradient">
  Framed Content
</div>

<div class="border-gradient">
  Framed Content
</div>

CSS

.border-gradient {
  width: 200px;
  padding: 2rem;
  border-radius: 11px;
  text-align: center;
  background: #ffffff;
  color: #111827;
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

@media (prefers-color-scheme: dark) {
  .border-gradient {
    background: #020617;
    color: #e5e7eb;
  }
}

.border-gradient {
  width: 200px;
  padding: 2rem;
  border-radius: 11px;
  text-align: center;
  background: #ffffff;
  color: #111827;
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

@media (prefers-color-scheme: dark) {
  .border-gradient {
    background: #020617;
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses gradient based stroke styling
• Enhances color rich edge emphasis 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.