When discussing shadows, it seems to involve another layer of the page, in my opinion. I have come up with three alternatives, but there may be better solutions using different CSS properties.
The first option involves manipulating the color
.speech-bubble-dark {
position: absolute;
background: #fff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 0.4em;
width: 300px;
top: 55px;
left: -100px;
z-index: 999;
}
.speech-bubble-dark:after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom-color: #eef;
border-top: 0;
margin-left: -15px;
margin-top: -15px;
}
The second suggestion, as mentioned in a previous comment, is to utilize filter: drop-shadow, but with the shadow from another bubble. This might not provide the best visual effect
.speech-bubble-dark {
position: absolute;
background: #fff;
filter: drop-shadow(0 7px 5.5px rgba(0, 0, 0, 0.2));
border-radius: 0.4em;
width: 300px;
top: 55px;
left: -100px;
z-index: 999;
}
.speech-bubble-dark:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom-color: #eee;
border-top: 0;
margin-left: -15px;
margin-top: -15px;
}
.speech-bubble-dark::after {
content: ' ';
width: 98%;
height: 1px;
background-color: transparent;
position: absolute;
top: -2.5px;
right: 1%;
border-radius: 1em;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
}
Lastly, the third approach appears to be the most favorable in my perspective
.speech-bubble-dark {
position: absolute;
background: #fff;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
border-radius: 0.4em;
border:1px ridge rgba(0, 0, 0, 0.1);
width: 300px;
top: 55px;
left: -100px;
z-index: 999;
}
.speech-bubble-dark:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom-color: #eef;
border-top: 0;
margin-left: -15px;
margin-top: -15px;
}
.speech-bubble-dark::after {
content: ' ';
width: 98%;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);;
position: absolute;
top: -1px;
right: 1%;
border-radius: 1em;
box-shadow: 0 -0.1 2px rgba(0, 0, 0, 0.2);
}