Kevin Powell - Community•3mo ago

Create multi coloured border box using conic gradient

Hello, Folks 👋🏻 Problem: I'm struggling to add a multicolored border box around a black box content using a conic gradient. Context: I have a paragraph tag that contains content, and I’ve styled it to transform the paragraph content into a black box. Then, I added an imaginary box behind this content box using the::after pseudo-class to create a multicolored border around it with a conic-gradient. I know I can adjust the top, left, width, and height properties to position the pseudo-element behind the content box, but I don't want to control the border that way. Instead, I want to control it by padding or another method, so that whenever I increase the padding, the border width also increases. Codepen: https://codepen.io/HritikDj/pen/XWLNjPB ( I want to create a similar effect which is there in the screenshot below)

Hritik jaiswal

CodePen

Border Animation using Conic Gradient

...

3 Replies

Mannix•3mo ago

https://codepen.io/MannixMD/pen/zYVozYv

MarkBoots•3mo ago

here a simple example (you'll have to play with the gradient yourself)

.box {
  width: 400px;
  padding: 1rem;
  
  border: 10px solid transparent;
  border-radius: 2rem;
  
  color: white;
  background: 
    linear-gradient(black 0 0) padding-box,
    conic-gradient(red,green,blue) border-box
}

.box {
  width: 400px;
  padding: 1rem;
  
  border: 10px solid transparent;
  border-radius: 2rem;
  
  color: white;
  background: 
    linear-gradient(black 0 0) padding-box,
    conic-gradient(red,green,blue) border-box
}

the linear-black gradient is clipped to the padding-box (so won't touch the border region) the conic-gradient is clipped to the border-box order of the bg's is important ( first line is the top layer ) because the border is transparent, you'll see the gradient there. With border-size you can control the thickness

Hritik Jaiswal•3mo ago

Thanks, @Mannix @MarkBoots that was quite helpful 🫡

Gaming

Programming

Create multi coloured border box using conic gradient