<style>
.regentropfen-wrap {
    --tropfen-radius: 100px;
    --tropfen-shadow: calc((var(--tropfen-radius) / 25) * -1) calc(var(--tropfen-radius) / 18) 8px 0 rgba(0,0,0,0.8);  
    position: relative;
    height: 50px;
    background-image: url();
    background-size: cover;
    background-position: center;
    
    margin: 20px 0;
        
}
.regentropfen-wrap .regentropfen {
    content: "";
    display: block;
    width: var(--tropfen-radius);
    height: calc(var(--tropfen-radius) - 0.8rem);
    border-radius: 50%;
    position: relative;
    box-shadow: var(--tropfen-shadow), inset calc((var(--tropfen-radius) / 5) * -1) calc((var(--tropfen-radius) / 5)) calc((var(--tropfen-radius) / 4)) 0 rgba(0,0,0,0.7);
    position: absolute;
    background-color: rgba(255,255,255,0.22);
}
.regentropfen-wrap .regentropfen:after {
    position: absolute;
    content: " ";
    background: #fff;
    width: 15%;
    height: 15%;
    border-radius: 50%;
    transform: skew(11deg, 2deg);
    top: 20%;
    left: 63%;
    z-index: 10;
    opacity: 0.9;
}
.regentropfen-wrap .regentropfen:before {
    position: absolute;
    content: " ";
    background-color: #fff;
    width: 9%;
    height: 9%;
    border-radius: 50%;
    transform: skew(10deg, 0deg);
    top: 40%;
    left: 75%;
    z-index: 20;
    opacity: 0.4;
}
.regentropfen-wrap .regentropfen:nth-child(1) {
    left: 50%;
    top: 50%;
}
.regentropfen-wrap .regentropfen:nth-child(2) {
    transform: scale(0.7);
    left: 6%;
    top: 10%;
}
.regentropfen-wrap .regentropfen:nth-child(3) {
    transform: scale(0.5);
    top: 40%;
    left: 70%;
}
.regentropfen-wrap .regentropfen:nth-child(4) {
    transform: scale(0.48);
    top: 63%;
    left: 75%;
}
.regentropfen-wrap .regentropfen:nth-child(5) {
    transform: scale(0.24);
    top: 20%;
    left: 60%;
}
.regentropfen-wrap .regentropfen:nth-child(6) {
    transform: scale(0.3);
    top: 30%;
    left: 10%;
}
.regentropfen-wrap .regentropfen:nth-child(7) {
    transform: scale(0.4);
    top: 71%;
    left: 30%;
}
  
</style>  
 
<div class="regentropfen-wrap">
    <div class="regentropfen"></div>
    <div class="regentropfen"></div>
    <div class="regentropfen"></div>
    <div class="regentropfen"></div>
    <div class="regentropfen"></div>
    <div class="regentropfen"></div>
    <div class="regentropfen"></div>
</div>
<br>
<br>
<br>
<br>