Add Gradient Background Color Along With Stroke - Css

I have added background gradient to one of the css class, but it is taking color from stroke, is there a way to make the border gradient ? Desired gradient border.

Solution 1:

yeah, we can do gradient background-color in stroke.Here I did sample code using gradient.

@keyframes load {
  0% {
    stroke-dashoffset: 0;
  }
}
.progress {
  position: relative;
  display: inline-block;
  padding: 0;
  text-align: center;
}
.progress.bar {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #93a2ac;
  font-family: Lato;
  font-weight: 100;
  margin: 2rem;
}
.progress.bar:after {
  content: attr(data-percent);
  position: absolute;
  width: 100%;
  top: 3.7rem;
  left: 0;
  font-size: 2rem;
  text-align: center;
}
.progress svg {
  width: 10rem;
  height: 10rem;
}
.progress svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
  fill: none;
  stroke-width: 25;
  stroke-dasharray: 629;
  stroke: #fff;
  opacity: 0.9;
  animation: load 10s;
}

<divclass="progress"><divclass="bar"data-name="SVG Skill"data-percent="97%"><svgviewBox="-10 -10 220 220"><gfill="none"stroke-width="9"transform="translate(100,100)"><pathd="M 0,-100 A 100,100 0 0,1 86.6,-50"stroke="url(#cl1)"/><pathd="M 86.6,-50 A 100,100 0 0,1 86.6,50"stroke="url(#cl2)"/><pathd="M 86.6,50 A 100,100 0 0,1 0,100"stroke="url(#cl3)"/><pathd="M 0,100 A 100,100 0 0,1 -86.6,50"stroke="url(#cl4)"/><pathd="M -86.6,50 A 100,100 0 0,1 -86.6,-50"stroke="url(#cl5)"/><pathd="M -86.6,-50 A 100,100 0 0,1 0,-100"stroke="url(#cl6)"/></g></svg><svgviewBox="-10 -10 220 220"><pathd="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"stroke-dashoffset="610"></path></svg></div><!--  Defining Angle Gradient Colors  --><svgwidth="0"height="0"><defs><linearGradientid="cl1"gradientUnits="objectBoundingBox"x1="0"y1="0"x2="1"y2="1"><stopstop-color="#e32a89"/><stopoffset="100%"stop-color="#498a98"/></linearGradient><linearGradientid="cl2"gradientUnits="objectBoundingBox"x1="0"y1="0"x2="0"y2="1"><stopstop-color="#498a98"/><stopoffset="100%"stop-color="#50eabf"/></linearGradient><linearGradientid="cl3"gradientUnits="objectBoundingBox"x1="1"y1="0"x2="0"y2="1"><stopstop-color="#50eabf"/><stopoffset="100%"stop-color="#6b57d9"/></linearGradient><linearGradientid="cl4"gradientUnits="objectBoundingBox"x1="1"y1="1"x2="0"y2="0"><stopstop-color="#6b57d9"/><stopoffset="100%"stop-color="#9c787a"/></linearGradient><linearGradientid="cl5"gradientUnits="objectBoundingBox"x1="0"y1="1"x2="0"y2="0"><stopstop-color="#9c787a"/><stopoffset="100%"stop-color="#50eabf"/></linearGradient><linearGradientid="cl6"gradientUnits="objectBoundingBox"x1="0"y1="1"x2="1"y2="0"><stopstop-color="#50eabf"/><stopoffset="100%"stop-color="#618099"/></linearGradient></defs></svg>