CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました

影の位置(x)		box-shadow: 99px 99px 99px 99px;
影の位置(y)		box-shadow: 99px 99px 99px 99px;
ぼかし距離		box-shadow: 99px 99px 99px 99px;
広がり		box-shadow: 99px 99px 99px 99px;
inset

実際やってみないと、文章では解りにくいので jQuery の スライダーを使ってリアルタイムでとんなビジュアルになるか解るようにしてみました。( inset はとても良く意味が解りました。なんというかデザイン的に格が上がる感じですね )

rgba は指定していません。これは、色と透過度だけの設定なので、形状は変わりません。( 但し、inset を使う場合は透過度は必須でしょうし、色もデザインに合わせて重要なファクターになると思います )

値の幅は、0〜50 です( 負が許される場合は -50 まで )。実際説明を読んでもいまいちピンと来ないので作ってみました。幸い、box-shadow はブラウザで全部ふつうに対応されている事が解っていたので、CSS の記述をそのまま使える( つまり文字列で動的に CSS を変更できる ) jQuery で作成しました。
( Windows の Safari だけ動かないみたいです / Mac は解らないです )

ライブラリの実装は

スライダーも jQuery UI を使っていますが、Google のライブラリを直リンクしています(そういうライブラリなので)。

( こちらの『サンプル』ボタンから jQuery タブで jQyery UIの『ドロップシャドウをスライダーで変化させる』でコードを変更しながらテストできます )

▼ jQuery を使ったソースコード

<link id="link" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/black-tie/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<style type="text/css">
#target {
	width: 400px!important;
	height: 100px;
	border: solid 1px #000000; /* 罫線 */
	margin: 50px 0 0 50px; /* 上と左の余白 */
}
#slider1x,#slider1y,#slider2, #slider3 {
	width: 200px;
	margin: 0 0 0 20px;
}
#tbl td{
	padding: 5px;
}
#result {
	width: 400px;
}
</style>
<table id="tbl">
<tr><td>影の位置(x)</td><td><div id="slider1x"></div></td><td>box-shadow: <b style='color:#F00'>99px</b> 99px 99px 99px;</td></tr>
<tr><td>影の位置(y)</td><td><div id="slider1y"></div></td><td>box-shadow: 99px <b style='color:#F00'>99px</b> 99px 99px;</td></tr>
<tr><td>ぼかし距離</td><td><div id="slider2"></div></td><td>box-shadow: 99px 99px <b style='color:#F00'>99px</b> 99px;</td></tr>
<tr><td>広がり</td><td><div id="slider3"></div></td><td>box-shadow: 99px 99px 99px <b style='color:#F00'>99px</b>;</td></tr>
<tr><td>inset <input type="checkbox" id="inset"/></td><td></td><td></td></tr>
<tr><td colspan="3"><input id="result"></td></tr>
</table>

<div id="target"></div>


<script type="text/javascript">
var p1x = "0px";
var p1y = "0px";
var p2 = "0px";
var p3 = "0px";
var pw = "";
$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )

$("#inset").change(function() {
	if ( $("#inset").prop('checked') ) {
		pw = " inset";
	}
	else {
		pw = "";
	}
	$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
	$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
});

$(function () {
	$("#slider1x").slider({
		range: "min",
		step: 1,
		min: -50,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p1x = ui.value+"px";
			$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
			$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
		}
	});
});

$(function () {
	$("#slider1y").slider({
		range: "min",
		step: 1,
		min: -50,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p1y = ui.value+"px";
			$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
			$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
		}
	});
});

$(function () {
	$("#slider2").slider({
		range: "min",
		step: 1,
		min: 0,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p2 = ui.value+"px";
			$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
			$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
		}
	});
});

$(function () {
	$("#slider3").slider({
		range: "min",
		step: 1,
		min: -50,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p3 = ui.value+"px";
			$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
			$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
		}
	});
});

</script>

CSS3

CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する

CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味

CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説

『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する

フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。

Google ストリートビューを表示している class="gm-style"

linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)

現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述

CSS3 : box-shadow の影分身の解説

CSS で画像が立ってるような影を付けて、画像の角は丸くしておく

IE 兼用背景 Fade transition の実装

CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

CSS3 と HTML5 で実装具合の表示テスト

ブラウザ別の角丸とグラデーションの適用状態の比較画像

CSS3 の borderRadius で、四角から円へのモーフィング

CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript