Kevin Powell - Community•2mo ago

How apply this border gradient?

I'm trying to solve it using https://css-tricks.com/gradient-borders-in-css/ and https://theodorusclarence.com/blog/gradient-border-is-hard but I'm not getting to do it. Can anyone help me please? the button background is a background using a linear-gradient that to have opacity

Chris Coyier

CSS-Tricks

Gradient Borders In CSS | CSS-Tricks

Let's say you need a gradient border around an element. My mind goes like this:

theodorusclarence.com

Gradient Border is Unexpectedly Hard | theodorusclarence.com

A simple gradient border is not as simple as it seems.

21 Replies

capt_uhu•2mo ago

can you show us what you've done so far? A codepen link?

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

I'll to make one (sorry if I don't to speak so correcty, I don't speak english so well)

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

I'm not sure if it's a good template https://codepen.io/pen?template=WNVXQq

CodePen

Create a New Pen

...

nilaallj•2mo ago

Not sure if this is what you are looking for, but this is how I make gradient borders on elements with fully or partially transparent backgrounds:

.element-with-gradient-border {
  --border-width: 5px;
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: 2.5px;
  
  &::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--border-width));
    border: inherit;
    border-radius: inherit;
    background: linear-gradient(blue, green) border-box;
    mask:
      conic-gradient(#000 0 0) padding-box exclude,
      conic-gradient(#000 0 0);
    pointer-events: none;
  }
}

.element-with-gradient-border {
  --border-width: 5px;
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: 2.5px;
  
  &::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--border-width));
    border: inherit;
    border-radius: inherit;
    background: linear-gradient(blue, green) border-box;
    mask:
      conic-gradient(#000 0 0) padding-box exclude,
      conic-gradient(#000 0 0);
    pointer-events: none;
  }
}

You define the gradient as a background on a pseudo element.

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

Yes, it works! Can you explain how I can understand it? I've never used a mask for this purpose before oh, I'm sorry, was a mistaken

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

nilaallj•2mo ago

Without mask the pseudo element with the gradient will cover the entire element. So we use mask to cut trough the pseudo element, but only the padding-box. What’s outside the padding-box (which is the border area) is left intact.

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

oh, it's cool

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

Thank you so much for helping me solve this problem, @nilaallj ! I just don't know how to remove these 'lines' 😅. It should be a gradient going to the top

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

i think which it's a problem in my code I'll try to see it in my browser. I'm applying a border in my button

nilaallj•2mo ago

Can you provide a codepen link? (:

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

I'm using tailwind and react, I don't know how to configure it in the Codepen : (

nilaallj•2mo ago

Ah, I see. I think this might be because background-origin is not set to border-box. In my example I used the background shorthand which should set border-box on both background-origin and background-clip. So by using the background longhands it should look like this:

  background-image: /* Your gradient */
  background-clip: border-box;
  background-origin: border-box;

  background-image: /* Your gradient */
  background-clip: border-box;
  background-origin: border-box;

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

it work! I just don't know why the border of the component is over the border with the gradient

nilaallj•2mo ago

Screenshot?

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

nilaallj•2mo ago

Does the border on the main element have transparent set as color? Not sure what’s going on here to be honest. Maybe check the calculated values in the inspector to make sure they match my example? It could have something to do with the mask also.

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

yes, the border is calculated as 2px, the border also is applied as transparent, I don't understand the reason for it don't work

.element-with-gradient-border {
  --border-width: 2px;
  position: relative;
  border: var(--border-width) solid transparent;
  @apply origin-center bg-origin-border;

  &::before {
    content: '';
    position: absolute;
    inset: calc(var(--border-width) * -1);
    border: inherit;
    border-radius: 24px;
    background: linear-gradient(white,red) border-box;
    mask:
      linear-gradient(#000 0 0) padding-box exclude,
      linear-gradient(#000 0 0);
    pointer-events: none;
  }
}

.element-with-gradient-border {
  --border-width: 2px;
  position: relative;
  border: var(--border-width) solid transparent;
  @apply origin-center bg-origin-border;

  &::before {
    content: '';
    position: absolute;
    inset: calc(var(--border-width) * -1);
    border: inherit;
    border-radius: 24px;
    background: linear-gradient(white,red) border-box;
    mask:
      linear-gradient(#000 0 0) padding-box exclude,
      linear-gradient(#000 0 0);
    pointer-events: none;
  }
}

nilaallj•2mo ago

It’s strange. I have pretty much exactly the same code in front of me right now and it works. Have a look: https://codepen.io/nilaallj/pen/dyBLqbV

nilaallj

CodePen

Border with gradient on button

...

𝗦𝗛𝗔𝗗𝗢𝗪OP•2mo ago

I don't understand, I'll see if has something affecting my result @nilaallj thanks you so much! : D it worked for me, I am very grateful

nilaallj•2mo ago

Glad to hear that. You’re welcome!

Gaming

Programming

How apply this border gradient?