CSSシャドウ生成器
横・縦の移動量とぼやけ・拡大値でbox-shadowコードを生成します。
入力
例の値が入力されています。直接確認するか、値を変更してみてください。
入力はブラウザで処理されます。再読み込みすると例の値に戻ります。
結果
入力された例値を直接使用して結果を確認するか、値を変更してみてください。
ブラウザでのみ処理します。入力は最大50,000文字で、結果は実行されないテキストとして表示されます。
結果を共有
ツールリンクと結果テキストを一緒に共有します。結果にはURLを入れません。以下の内容を確認して共有してください。
計算・変換基準
オフセット・ぼやけ・割れによりbox-shadowコードを作成。
box-shadow: x y blur spread color
入力例
0px 4px 12px 0px #000000
横方向のずれ0、縦方向のずれ4、ぼかし8、広がり0にすると、下方向にずれたぼかし影になります。単位はすべてpxです。
使用方法
- 入力された例値を使用するか、横移動px、縦移動px、ぼかしpx、拡大px、HEX色項目を変更してください。
- 結果を確認を押して下の結果を確認してください。
- 必要なら、結果をコピーして取り出すことができます。
よくある質問
明るさと暗さの違いは何ですか？
明るさは影の輪郭を増減させ、暗さは境界を滑らかにします。負の明るさは可能ですが、暗さの半径は0以上でなければなりません。このツールは単一の外部影を生成します。
計算基準と参考資料
- W3C — CSS Backgrounds and Borders
box-shadowのオフセット・ぼやけ・重なり