Gradient Borders in CSS

Gradient Borders: 3 Techniques

One way to create gradient borders is by using a parent element with a gradient background — background-image: linear-gradient() — and a padding of desired border colors and width. Then, the child has a background color of its own.

Border radius works, but can use some finessing to get it to look visually correct. Here the parent has a border-radius of 12px while the child’s is 8px.

And if the background matches the page, it looks “transparent” (even though it definitely is not).

<div class="parent">
  <div class="child">Result</div>
</div>

<style>
  .parent {
    background-image: linear-gradient(to right, #50c878, #3844c6);
    padding: 4px;
  }

  .child {
    background: white;
    color: black;
  }
</style>

---

Another method is to use a transparent border with border-image and border-image-slice. This is actually easier than above, as you’re dealing with just border properties on the parent element. And it’s transparent by default. However, rounded borders won’t work.

<div class="border-gradient-transparent">Result</div>

<style>
  .border-gradient-transparent {
    border: 4px solid transparent;
    border-image: linear-gradient(to right, #50c878, #3844c6);
    border-image-slice: 1;
  }
</style>

---

And finally, the fanciest border: gradient with rounded corners and a transparent background. I didn’t figure this out, but here’s the original post that I found:

How to create rounded gradient borders with any background in CSS(Opens in a new tab)

<div class="border-gradient-transparent-rounded">Result</div>

<style>
  .border-gradient-transparent-rounded {
    @apply relative;
  }

  .border-gradient-transparent-rounded::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 4px solid transparent;
    border-radius: 12px;
    background: linear-gradient(
        140deg,
        var(--color-blue-light) 0%,
        var(--color-blue-dark) 25%,
        var(--color-green-dark) 50%,
        var(--color-green-emerald) 100%
      )
      border-box;
    mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
</style>

---

And that concludes the three main ways that I’ve learned how to create gradient borders in CSS.