Как лучше делается Merge или Union в css?

Слить круг и направляющую линию с общей внутренней тенью в чистом CSS можно, но это один из тех случаев, где “идеально как в векторном редакторе” будет сложно. CSS не умеет настоящие boolean operations вроде union/merge для произвольных фигур так, как Figma или SVG. Но можно имитировать форму несколькими слоями.

Если нужна одна фигура с общей внутренней глубиной, самый чистый вариант — SVG mask/clipPath. Это не PNG, но форма будет векторной и адаптивной. Пример идеи:

<svg viewBox="0 0 300 80">
  <defs>
    <filter id="inner">
      <feOffset dx="0" dy="2"/>
      <feGaussianBlur stdDeviation="3" result="blur"/>
    </filter>
  </defs>
  <path d="M40 40 H260 M40 40 A30 30 0 1 0 40 39.9" />
</svg>

Для CSS-only можно сделать общий wrapper, линию и круг псевдоэлементами, а тени подбирать так, чтобы визуально они совпадали:

.step {
  position: relative;
  height: 80px;
}
.step::before {
  content: "";
  position: absolute;
  left: 40px;
  right: 0;
  top: 38px;
  height: 4px;
  background: #e8eef8;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
.step::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e8eef8;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.2);
}

Но это не настоящий merge: на стыке могут быть артефакты. Их обычно закрывают маленьким перекрывающим элементом с тем же фоном.

Итог: если нужна точная фигура и качественная внутренняя тень — используйте SVG, это лучше PNG и честнее CSS-хака. Если допустима имитация, делайте круг и линию псевдоэлементами, подгоняйте тени и закрывайте стык перекрытием.