circular div inner shadow on bottom - html

Question

I want to have inner shadow only on bottom semicircle of my circular div but shadow seems moving on wrong edges.
Js Fiddle
important part from code which does not work:
box-shadow: inset 3px 3px 3px -1px #000;
What I want is slightly different from those in fiddle :
Some may call this as an inset shadow.

Answer 1

that's what you mean:
.floating-circle{
border-radius: 50%;
background-color: blue;
width: 100px;
padding-top: 100px;
position: absolute;
box-shadow: inset 0 -3px 3px #000;
}
edit, so maybe like this, but without blur:
.floating-circle{
border-radius: 50%;
background-color: #00008B;
width: 100px;
padding-top: 100px;
position: absolute;
overflow: hidden;
}
.floating-circle::after{
border-radius: 50%;
background-color: blue;
width: 100px;
padding-top: 100px;
content:'';
position: absolute;
bottom:5px;
left:0;
}
main element should be "shadow" color, pseudo element should be your main color
3rd try :P with blur, of course You can manipulate blur amount, pesudo element width/height and position to achiver right amount of inner shadow:
.floating-circle{
border-radius: 50%;
background-color: #00008B;
width: 200px;
height: 200px;
position: absolute;
overflow: hidden;
}
.floating-circle::after{
border-radius: 50%;
width: 220px;
height: 220px;
content:'';
position: absolute;
bottom:-5px;
left:-10px;
box-shadow: inset 0 -20px 10px rgba(0,0,0,0.5);
}
i'am afraid there always be some little artifacts, but there are some technics that can make them less visible, translateZ(0) or something like that - try it yourself :)
edit, with percent values:
.floating-circle{
border-radius: 50%;
background-color: #00008B;
width: 70%; /*can be %/px/vw or anything else */
height: 70%; /*can be %/px/vw or anything else */
position: absolute;
overflow: hidden; /*disable this to better see what exactly is happeing with shadow*/
}
.floating-circle::after{
border-radius: 55%;
width: 110%;
height: 110%;
content:'';
position: absolute;
bottom:-5%;
left:-5%;
box-shadow: inset 0 -20px 10px rgba(0,0,0,0.5);
}
you can now set .floatin-circle width/height to percent value or pixels value, and shadow should always work pretty good - you can "tweak" amount of shadow, by rgba opacity color or moving it up and down with "bottom" value or play with box-shadow props :)