Skip to content
Runs privately in your browser

Free Online CSS Box Shadow Generator

Generate a CSS box shadow using pixel offsets, blur, spread and a hex color.

Your input stays on this device. Processing is bounded; regex runs in a worker with a two-second timeout.

Result



How to use CSS Box Shadow Generator
Generate a CSS box shadow using pixel offsets, blur, spread and a hex color.
  1. Set X.
  2. Set Y.
  3. Set Blur.
  4. Set Spread.
  5. Set Color.
  6. Run the tool, review the result and its stated limitations, then copy or download if needed.
Example & practical use
Generate a CSS box shadow using pixel offsets, blur, spread and a hex color. The example below demonstrates X; Y; Blur; Spread; Color.
Example input:
{
  "x": 0,
  "y": 4,
  "blur": 12,
  "spread": 0,
  "color": "#123456"
}
Expected result (relevant fields):
"box-shadow: 0px 4px 12px 0px #123456;"
Features & result limitations
Generate a CSS box shadow using pixel offsets, blur, spread and a hex color.
Frequently asked questions
What inputs does CSS Box Shadow Generator accept?
X; Y; Blur; Spread; Color
How should I interpret the CSS Box Shadow Generator result?
Generate a CSS box shadow using pixel offsets, blur, spread and a hex color.
Where does CSS Box Shadow Generator process my data?
Inputs are processed locally in your browser. Submitted text is not sent to external services. A successful-run event increments an aggregate tool counter without your input.