Runs in your browser · Last updated 7 September 2026
Free Box-Shadow Playground
Free CSS box-shadow playground. Offset, blur, spread, hex color, optional inset. Browser tool — nothing is uploaded.
Inset
no
Declaration
box-shadow: 0px 8px 24px -4px #0f172a80;
CSS
box-shadow: 0px 8px 24px -4px #0f172a80;
How to use this tool
- Set offsets, blur, spread, and a hex color.
- Tick inset for an inner shadow.
- Copy the box-shadow declaration.
Worked example
0 8px 24px -4px #0f172a80 is a soft drop shadow. Pair a colored wash from the CSS gradient generator.
Frequently asked questions
- What do the numbers mean?
- offset-x, offset-y, blur-radius, spread-radius, color. Optional inset. One layer — stack declarations yourself for multiple shadows.
- 8-digit hex?
- Yes. #0f172a80 is slate at half alpha. Invalid hex falls back to #0f172a.
- Uploaded?
- No.