circular div inner shadow on bottom

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 :)