I want a white container with chat bubbles masked to a gradient that when scrolled will change with the gradient below, as seen in this example:
I’ve tried making the part of .container
that is behind any chatBubble
transparent so that the background of .root
is visible.
.root {
background-color: linear-gradient(red, yellow);
width: 100vw;
height: 100vh;
}
.container {
width: 100%;
height: 100vh;
background-color: white
}
.chatBubble {
background-color: transparent;
border-radius: 4px;
min-width: 50;
padding: 10px;
}
<div class="root">
<div class="container">
<chatBubble>This is a chat bubble</chatBubble>
<chatBubble>This is another chat bubble</chatBubble>
</div>
</div>
2
Answers
This is what I’ve got so far, trying to mask it so I can get the white background to work with the gradient.
You can "drop shadows" from
.bubble
: