Gradient Border

Preview

Tailwind Classes

relative bg-slate-900 rounded-lg p-[2px] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-r before:from-pink-500 before:via-purple-500 before:to-cyan-500 before:-z-10

CSS Code

.gradient-border {
  position: relative;
  background: #0f172a;
  border-radius: 0.5rem;
  padding: 2px;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #ec4899, #a855f7, #06b6d4);
  z-index: -1;
}

HTML Example

<div class="relative bg-slate-900 rounded-lg p-[2px] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-r before:from-pink-500 before:via-purple-500 before:to-cyan-500 before:-z-10">
  <div class="bg-slate-900 rounded-lg p-6">
    <p class="text-white">Gradient border content</p>
  </div>
</div>

Use Cases

Browser Support

All modern browsers