Is there a way to add padding or boxshadow to a css conic-gradient section

Question

I am try to implement a custom pie chart with css.

Currently i have

Is there any I can add a little padding or box-shadows to each conic-gradient segments?

Code

HTML

<div class="pie-chart">
</div>

CSS

.pie-chart {
    background:
        radial-gradient(
            circle closest-side,
            transparent 66%,
            white 0
        ),
        conic-gradient(
                #8C071F 90deg, 
                #F2884B 0 180deg, 
                #F2B705 0 270deg,
        #6CBAD9 0
    );
    position: relative;
    width: 150px;
    min-height: 350px;
    margin: 0;
    outline: px solid #ccc;
}

Answer 1

border-radius, box-shadow and some transformation can easily solve your problem without the need of conic-gradient

.pie-chart {
  margin:25px;
  width: 200px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
}

.pie-chart div {
  width: 50%;
  height: 50%;
}

.pie-chart div:nth-child(1) {
  border-top-left-radius: 200px;
  background: red;
  transform: translate(-5px, -5px);
  box-shadow: -3px -3px 12px 2px grey;
}

.pie-chart div:nth-child(2) {
  border-top-right-radius: 200px;
  background: blue;
  transform: translate(5px, -5px);
  box-shadow: 3px -3px 12px 2px grey;
}

.pie-chart div:nth-child(3) {
  border-bottom-left-radius: 200px;
  background: green;
  transform: translate(-5px, 5px);
  box-shadow: -3px 3px 12px 2px grey;
}

.pie-chart div:nth-child(4) {
  border-bottom-right-radius: 200px;
  background: purple;
  transform: translate(5px, 5px);
  box-shadow: 3px 3px 12px 2px grey;
}

<div class="pie-chart">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>