<h2>Default gradients vs color hints at 30% or 70%</h2>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<h2>Compare the hint vs a manual mid-point stop:</h2>
<div>Manual stop at 25%</div>
<div>Color hint at 25%</div>

body { margin: 0; }
h2 { margin-bottom: 0; }
div {
  height: 25vh;
  min-height: 5em;
  display: flex;
  padding: 0.5em;
  box-sizing: border-box;
}
div:nth-of-type(1) {
  background: linear-gradient(to right, darkGreen, lightSkyBlue)
}
div:nth-of-type(2) {
  background: linear-gradient(to right, darkGreen, 30%, lightSkyBlue)
}
div:nth-of-type(3) {
  background: linear-gradient(to right, darkGreen, 70%, lightSkyBlue)
}
span {
  display: block;
  width: calc(25vmin - 1em);
  height: calc(25vmin - 1em);
  min-width: 4em;
  min-height: 4em;
  border-radius: 50%;
  margin: auto;
}
div:nth-of-type(1) span {
  background: radial-gradient(deepPink, gold);
}
div:nth-of-type(2) span {
  background: radial-gradient(deepPink, 30%, gold);
}
div:nth-of-type(3) span {
  background: radial-gradient(deepPink, 70%, gold);
}
div:nth-of-type(4) {
  background: linear-gradient(to right, 
    rgb(100%, 0%, 0%), 
    rgb(75%, 25%, 50%) 25%, 
    rgb(50%, 50%, 100%));
  color: white;
}
div:nth-of-type(5) {
  background: linear-gradient(to right, 
    rgb(100%, 0%, 0%), 
    25%, 
    rgb(50%, 50%, 100%));
  color: white;
}