Homepodのページの文字グラデーションが格好良かったのでやってみた

日本発売がなさそうなありそうなAppleの「Homepod」ですが、説明ページの文字のグラデーションがなんだか格好いい。

一昔前だと1文字１文字カラーコードを変えてゆく、なんてしょうもないことしていましたが、今はCSSでできてしまうのか。
というわけでソースをみながら真似てみました。

CSSはこんな感じです

<style>
.test p {
    background-position: top left, top right;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 6px;
    background-image: linear-gradient(to left, #777dff 0px, #f154ff 200px, #f0357c 400px),linear-gradient(to right, #777dff 0px, #497ce2 200px, #37bdde 400px);
    padding-bottom: 6px;
    font-size: 54px;
    line-height: 1.48164;
    font-weight: 700;
    letter-spacing: -.015em;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    color: transparent;
    background-size: 51% 100%;
}
</style>

HTMLのソースも貼っておきます。

<div class="test" style="text-align: center;">
<p>Hey Siri, play some Drake</p>
<p>Hello, world.</p>
<p>日本語だったらどうなる？</p>
<p>わーい、できた！</p>
</div>

それにしても真似してみたいWebページのソース調べるなんていつぶりだろう・・・