Drawing a bubble reflection with gradients - css

Question

Happy new year!
Im trying to substitute this background picture with a css for scaling purposes.
Im having a problem with gradients logic.
the div properties:
.bg {
border: 1px solid white;
border-radius:10px;
padding:10px;
width:100%;
}
then im trying to color it
the background color is #065BDB
the 'bubble reflection' color is a gradient from rgba(87,144,231,1) to rgba(87,144,231,0) - same color with fading opacity.
to make the right shape of the 'bubble' i need to draw circle-square-circle with gradients, the circles draw ok, but the rectangle is problemetic
background:
radial-gradient(2em 2em at 3% 25%, rgba(87,144,231,1) 50%, transparent 50%),
linear-gradient(to bottom, transparent 3%, rgba(87,144,231,1) , transparent 97%),
radial-gradient(2em 2em at 97% 25%, rgba(87,144,231,1) 50%, transparent 50%);
im having multiple issues with this, cannot figure out how to draw a square from top to bottom with a margin on left and right, and how to add transparency from top to bottom to it, + adding a seconds background, maybe its better to make 2 divs instead of 1.

Answer 1

You can rely on a pseudo element and easily obtain the result:
.bg {
border: 1px solid white;
border-radius: 50px;
height:60px;
background: #065BDB;
position:relative;
z-index:0;
}
.bg::before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:15px;
right:15px;
height:30px;
border-radius:inherit;
background:linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0));
}
<div class="bg">
</div>
With multiple background you can try this:
.bg {
border: 1px solid white;
border-radius: 50px;
height:60px;
background:
radial-gradient(30px 30px at right,transparent 50%, #065BDB 52%) 0% 10px/35px 30px,
radial-gradient(30px 30px at left,transparent 50%, #065BDB 52%) 100% 10px/35px 30px,
linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 10px/100% 30px,
#065BDB;
background-repeat:no-repeat;
box-sizing:border-box;
}
<div class="bg"></div>
We can add some CSS variable to control the shape:
.bg {
--h:30px; /*the height of the bubble*/
--d:35px; /*the distance from the sides*/
--t:10px; /*the distance from the top*/
margin:5px;
border-radius: 50px;
height:60px;
background:
radial-gradient(var(--h) var(--h) at right,transparent 50%, #065BDB 52%) 0% var(--t)/var(--d) var(--h),
radial-gradient(var(--h) var(--h) at left,transparent 50%, #065BDB 52%) 100% var(--t)/var(--d) var(--h),
linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 var(--t)/100% var(--h),
#065BDB;
background-repeat:no-repeat;
box-sizing:border-box;
}
<div class="bg"></div>
<div class="bg" style="--h:20px;--d:50px;--t:20px"></div>
<div class="bg" style="--h:40px;--d:100px;--t:5px"></div>

Answer 2

try with ::before
.bg {
width:100%;
height:50px;
position:relative;
background:royalblue;
border-radius:20px;
}
.bg::before {
content:'';
width:97%;
height:25px;
background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.07));
position:absolute;
top:7px;
left:50%;
transform:translateX(-50%);
border-radius:20px;
}
<div class="bg"></div>