CSS box-shadow generator
Stack up to 8 box-shadow layers with offset, blur, spread, color and inset, preview them live and copy the CSS.
- Runs in your browser
- No upload
- Result stays on your device
Privacy & limitsRuns in your browser. Nothing is uploaded.
Input content stays in this tab; Refentra does not upload or store it. Optional aggregate action counts are sent only with your usage consent. Clear the workspace when finished.
Supported profile: 1–8 editable px layers, inset and alpha 0–1; blur cannot be negative.
Maximum text: 200,000 UTF-16 units; parser limits can be smaller. Worker time limit: 15 seconds (regex 1.5 seconds).
Check the input and the result
- Prepare and choose the operation
Set the horizontal and vertical offsets, blur, spread, color and alpha for each layer, and turn on inset for inner shadows.
- Check a concrete example
Use this sample and compare the indicated result: x=0 y=4 blur=8 spread=0 color=#000000 alpha=0.25 → 0px 4px 8px 0px rgba(0, 0, 0, 0.25)
- Check the output before you reuse it
Check the combined shadow on a contrasting background. Multiple layers are separated by commas and keep their order.
Answers for this task
Why can a shadow disappear after copying?
An ancestor element with clipping or overflow can cut it off. An alpha of 0 or a matching background can also hide a shadow that is otherwise valid.
What should I check if the input fails?
Supply 1–8 valid layers. Blur can't be negative and alpha must be between 0 and 1. Offsets and spread may be negative.
Where does this tool stop?
The output styles the element’s box. It doesn't generate text-shadow and doesn't follow the opaque outline of a transparent image.