Box-shadow side-effect blur not smooth. inner square in shadow

Question

I have a slider on my page to change the box-shadow values. At some high blurring values there is an unwanted box-like breaking the shadow, when it is supposed to be a smooth shadow all the way. Is there anyway to avoid this easily? Thanks for the help. P. S. I actually need it to work with 'inset' too.

div
{
  width:200px;
  height:200px;
  border-radius: 100px;
 background-color:blue;
 -webkit-box-shadow: 169px 129px 300px -15px rgba(0,0,0,1);
 -moz-box-shadow: 169px 129px 300px -15px rgba(0,0,0,1);
 box-shadow: 169px 129px 300px -15px rgba(0,0,0,1);
}

<div></div>

Answer 1

For circular box-shadows the blur cannot go above the width & height of the element. The spread can though.

Since your element is 200px * 200px, the maximum for the blur value is 200px.

Have a look below at the example which doesn't go above 200px and you will see that it creates the box-shadow as expected

div {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: blue;
  box-shadow: 169px 129px 200px -15px rgba(0, 0, 0, 1);
}

<div></div>

The spread value can alternatively go above the element width and height and therefore you can make bigger spreads.

div {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: blue;
  box-shadow: 169px 129px 0 250px rgba(0, 0, 0, 1);
}

<div></div>

You also didn't really need the prefixes since CSS3 Box-shadows are very well supported now. CanIUse

You can read more about CSS Box shadows in the MDN Documentation