A solution! For many months I have been trying to find a decent solution to rounded gradient borders that allow a semi-transparent or blurred main background. Finally, I came across this: https://forum.freecodecamp.org/t/how-to-make-a-css-border-gradient-with-transparent-background/571903/2

My pen https://codepen.io/benfrain/pen/KKEemKd is a fork of Lasse’s original from that post.

I’ve not seen this approach before, and I can take no credit for what I am about to share. But as it took me a moment to understand how it is doing what it is doing, and I found it so clever, I thought I would detail my understanding here.

Markup and CSS

Given markup like this:

<div class="gradient-border-mask">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, aut
    fugit? Perspiciatis cupiditate, tenetur rem ratione facere iste inventore
    harum, quaerat, similique voluptate ab vitae saepe quod odit eveniet
    assumenda!
  </p>
</div>

And CSS like this:

.gradient-border-mask {
  position: relative;
  padding: 1.3rem;
  backdrop-filter: blur(10px);
}

.gradient-border-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  border: 5px solid transparent;
  background: linear-gradient(140deg, red, orange, yellow, green, indigo, blue) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

We get this:

Result

See the Pen gradient borders by Ben Frain (@benfrain) on CodePen.

And crucially, here is the combination of features this approach allows:

• blurred or semi transparent background
• gradient border with rounded corners

How this works

The background of the ::before pseudo element is what creates the border you will ultimately see. Note that here it is set to border-box so extends out behind the border area of the element (5px in this example). You could also position the background behind the border area by using background-size and a calc() equal to the width of the border such as calc(100% + 5px) but I find using the border-box far more elegant. As this is just a rectangle currently, you can add your border-radius and there is the basis of the gradient border. Except it isn’t a border yet, it is a rectangle. How do we fix that?

Here is the clever bit I have never seen before; we then use a mask, and a mask composite. This allows us to create a ‘shape’, that our gradient border will inhabit. To create this shape, we need to composite two images together and find the difference. That might sound like a lot of work but we can make those two images with CSS using a linear-gradient. It doesn’t matter that the linear-gradient is actually just a flat white colour, the fact that it is defined as a linear-gradient means that the browser renders the outcome of that notation as an image and the image can be composited. So the first mask is a linear gradient set to the padding-box, which then crucially does not include the border, and the second gradient is the full size, and the difference between them is the border shape. Genius!!!!

Our inner element can have any kind of background we like. For maximum fanciness, I have gone with a backdrop-filter here, but you can use anything you normally would and the gradient border remains.

Final thing to note is that the previous vendor prefixed version of -webkit-mask-composite used a different value (destination-out instead of exclude) for the required effect; the Codepen has those fallbacks in too.