Gradient borders

This guide shows you how to get gradient borders working in your project. They also work with transparent backgrounds.

The necessary CSS

The following CSS is needed to get gradient borders working:

.button {
    position: relative; /* This is needed to make the pseudo elements work */

    &::after {
        content: ""; /* Empty content to make the pseudo element work */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: inherit; /* Copies the border radius from the parent element */
        padding: 2px; /* This controls the border thickness */
        background: var(--gradient); /* This is the gradient */
        mask: conic-gradient(#000 0 0) content-box, conic-gradient(#000 0 0); /* This creates a mask that is used to clip the border */
        mask-composite: exclude; /* This makes the mask clip the border */
        pointer-events: none; /* Makes sure the pseudo element doesn't block clicks */
    }
}

Creating a mixin

To make it easier to use the gradient borders, you can create a mixin:

@mixin gradient-border($thickness: 2px, $gradient: var(--gradient)) {
  border: none !important;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: #{$thickness}; /* control the border thickness */
    background: #{$gradient};
    mask:
      conic-gradient(#000 0 0) content-box,
      conic-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}

Using the mixin

This will create a gradient border with a thickness of 3px and a gradient from blue to red:

.button {
  @include gradient-border(3px, linear-gradient(to right, #00f, #f00));
}

Live example

Hello there!

<style>
.button {
  /** Some default styles */
  background: transparent;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;

  /** Gradient border styles */
  border: none !important;
  position: relative;
  --gradient: linear-gradient(to right, #00f, #f00);

  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient);
    mask: conic-gradient(#000 0 0) content-box, conic-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  &:hover {
    background: var(--gradient);
  }

}
</style>

<button class="button" type="button">
  Hello there!
</button>