Kevin Powell - Community•7mo ago

linear-gradient border

Im trying to apply a linear-gradient border to an element, so I just have a div and the ::before element with position absolute but the problem is the ::before wont go behind the div even with z-index:-1; Here's a quick jsbin to see what Im talking about : https://jsbin.com/cujusodumi/edit?html,css,output

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

4 Replies

MarkBoots•7mo ago

you should not set z-index on the main element, it will create a new stacking context which prevens childs (or pseudo's) to go behind it but you can make it a bit easier witout the use of a pseudo element

div{
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 2px solid transparent;
  background: 
    linear-gradient(crimson 0 0) padding-box,
    linear-gradient(to bottom right, hsl(192,100%,67%), hsl(280,87%,65%)) border-box;
}

div{
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 2px solid transparent;
  background: 
    linear-gradient(crimson 0 0) padding-box,
    linear-gradient(to bottom right, hsl(192,100%,67%), hsl(280,87%,65%)) border-box;
}

for your hover example, you can set the default border-color to black, and on hover transparent

AximOP•7mo ago

ohh ok I'll try it thx, I was trying with 1px borders but I got weird visual glitch where the gradient circle is 'bigger' on some sides of the circle

capt_uhu•7mo ago

yep, that's going to happen with super thin borders. It's a hardware limitation. With a 1px width border there just aren't enough pixels available for the browser to render the rounding of the the corners in the way we expect.

AximOP•6mo ago

ok I see, cool to know thx for the info

Gaming

Programming

linear-gradient border