iMessageの吹き出しみたいなグラデーション

iMessageみたいに、スクロールしても複数の要素で固定されたグラデーションの背景をつけるものです。
小一時間悩みましたが、ものすごく初歩的なことでした。

background-attachment:fixed;

を設定するだけです。
background-positionで位置の調整をしています。

コード

SCSS

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  .comment {
    font-family: sans-serif;
    color: #fff;
    padding: 1em;
    margin: .5em 1em;
    text-align: right;
    background: linear-gradient(-180deg, #2EB5FE 0%, #157EFB 100%) fixed top right;
    border-radius: 13px;
  }
}

HTML

<div class="stack">
  <div class="comment">・・・</div>
</div>

サンプル

JSFiddle

iMessage like comment gradient