スクロール可能なグラデーション チャット バブル

Question

次の例に示すように、下のグラデーションでスクロールするとグラデーションが変化するチャット バブルを備えた白いコンテナが必要です。

chatBubble の背後にある .container 部分を透明にして、.root の背景が見えるようにしてみました。

.root {
  背景色: 線形グラデーション(赤、黄);
  幅: 100vw;
  高さ: 100vh;
}

。容器 {
  幅: 100%;
  高さ: 100vh;
  背景色: 白
}

.chatバブル {
  背景色: 透明;
  境界半径: 4px;
  最小幅: 50;
  パディング: 10px;
}

<div class="root">
  <div class="コンテナ">
    <chatBubble>これはチャット バブルです</chatBubble>
    <chatBubble>これは別のチャット バブルです</chatBubble>
  </div>
</div>

Answer 1

これは私がこれまでのところ得たもので、グラデーションに合わせて白い背景を持てるようにマスクしようとしています。

リーリー リーリー

Answer 2

.bubble から「影の配置」ができます:

リーリー リーリー