Discussion on: How to make a CSS speech bubble with borders and drop shadow

equinusocio profile image
Mattia Astorino

Hi, you can achieve the shadow with the same elements from the first example, just put this to the

.speech-bubble {
  filter: drop-shadow(6px 4px 0px rgba(0, 0, 0, 0.2));
  border: 1px solid black;

And this to the ::after:

.speech-bubble::after {
  bottom: -19px;
  filter: drop-shadow(1px 2px 0 black);
teroauralinna profile image
Tero Auralinna Author

Hi, thanks for the tip! That also works well and simplifies code.