width: fit-contentを利用してテキストをセンタリングし、グラデーションの背景を表示します。
デモページはこちら

以下のhtml構造で確認します。display: inline-blockで実装する場合は親要素が必要になります。

<p class="title">display: inline-block;の場合</p>
<div class="box01">
  <p class="text01">abcdefghi</p>
  <p class="text01">jklmnopqrstuvwxyz</p>
</div>

<p class="title">display: block;の場合</p>
<p class="text02">abcdefghi</p>
<p class="text02">jklmnopqrstuvwxyz</p>

CSSは以下になります。display: inline-blockはmarginによるセンタリングができないため、親要素にtext-align: centerを適用しています。これに対し、display: blockにwidth: fit-contentとmargin: 0 autoでセンタリングした場合、親要素のhtmlとCSSは必要ありません。

.box01 {
  text-align: center;
}
.text01 {
  font-size: 5rem;
  font-weight: 700;
  color: #fff;
  display: inline-block;
  padding: 10px 30px;
  background: linear-gradient(90deg, #0016A7 0, #007FF9 100%);
  border-radius: 100vw;
}
.text02 {
  font-size: 5rem;
  font-weight: 700;
  color: #fff;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 30px;
  background: linear-gradient(90deg, #0016A7 0, #007FF9 100%);
  border-radius: 100vw;
}
.text01:not(:first-child),
.text02:not(:first-child) {
  margin-top: 20px;
}