Box Shadow & Text Shadow Generator
Compose box-shadow and text-shadow CSS with sliders and instant preview.
Loading tool…
How to use it
- Pick box shadow or text shadow mode.
- Adjust offsets, blur and spread with the inputs; set color and opacity separately.
- Enable Inset for inner shadows (box shadows only).
- Copy the single valid CSS declaration shown in the output.
About this tool
Adjust offsets, blur, spread, color and inset state with visual sliders while a live preview shows the result on a sample element. The generated CSS is a single valid declaration, ready to paste into any stylesheet.
Your input never leaves the browser: this tool works entirely offline once the page has loaded.
Frequently asked questions
What is the difference between box-shadow and text-shadow?
Box shadows can have a spread and an inset variant; text shadows cannot. The tool hides the spread field automatically in text mode.
Can I stack multiple shadows?
This tool generates one shadow per output. To stack, chain several declarations with commas after copying each layer.