CSS stop-color Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.example {
  display: inline-block;
  padding: 12px;
  background: #f7f7f7;
  border-radius: 8px;
}

svg {
  width: 320px;
  height: auto;
  display: block;
}

.stop-start {
  stop-color: #ff7a18; /* orange */
  stop-opacity: 1;
}

.stop-middle {
  stop-color: #ffd200; /* yellow */
  stop-opacity: 1;
}

.stop-end {
  stop-color: #2bff88; /* green */
  stop-opacity: 1;
}

/* Change gradient colors on hover */
.example:hover .stop-start { stop-color: #ff3b3b; }
.example:hover .stop-end   { stop-color: #3b83ff; }</style></head><body><div class="example">
  <svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title desc" role="img">
    <title id="title">Rectangle filled with CSS-styled gradient stops</title>
    <desc id="desc">Linear gradient with stops styled using CSS stop-color</desc>
    <defs>
      <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop class="stop-start" offset="0%"/>
        <stop class="stop-middle" offset="50%"/>
        <stop class="stop-end" offset="100%"/>
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="280" height="100" rx="12" fill="url(#myGradient)" stroke="#333" stroke-width="2"/>
  </svg>
</div></body></html>