스크롤 가능한 그라데이션 채팅 풍선

Question

다음 예와 같이 아래 그라데이션으로 스크롤할 때 변경되는 그라데이션이 있는 말풍선이 있는 흰색 컨테이너를 원합니다.

chatBubble 뒤에 있는 .container 부분을 투명하게 만들어서 .root

.root {
  배경색: 선형 그라데이션(빨간색, 노란색);
  폭: 100vw;
  높이: 100vh;
}

.컨테이너 {
  너비: 100%;
  높이: 100vh;
  배경색: 흰색
}

.chatBubble {
  배경색: 투명;
  테두리 반경: 4px;
  최소 너비: 50;
  패딩: 10px;
}

  

    채팅 풍선입니다
    이것은 또 다른 채팅 풍선입니다
  

Answer 1

이것이 제가 지금까지 가지고 있는 것입니다. 그라데이션에 맞게 흰색 배경을 가질 수 있도록 마스크하려고 합니다.

으아악 으아악

Answer 2

.bubble에서 "그림자 배치"를 할 수 있습니다:

으아악 으아악