🖌️ CSS Box Shadow Generator — Offset, Blur, Spread
Adjust the shadow controls and generate a box-shadow declaration you can paste into a stylesheet. No design account is required.
Input
Result
Parts
Private by design. This tool runs entirely in your browser — nothing you enter or add is uploaded to any server.
How it works
- Set horizontal and vertical offsets, blur and spread in pixels.
- Enter a hex color and an opacity from 0 to 100. Check inset for an inner shadow.
- Press Generate CSS to get a box-shadow declaration ready to paste.
Examples
- 0 8px 24px with 25% opacity is a soft drop shadow under a card.
- Inset with a small blur darkens the inner edge of an input.
- A negative spread pulls the shadow inward so it does not spill past rounded corners.
Frequently asked questions
What color formats work?
Use a 3 or 6 digit hex color such as #0f172a. Opacity is applied separately as an rgba alpha.
Can I stack multiple shadows?
This generator emits one shadow. Paste several declarations together with commas if you need a stack.
Does it call a design API?
No. The CSS string is built locally in the page.
Related tools
More Design tools →Color Contrast Checker
Measure WCAG contrast between two hex colors for text and interface graphics.
Aspect Ratio Calculator
Solve width, height and simplified aspect ratios without breaking proportions.
Color Palette Generator
Generate five hex tints and shades from a single base color.
PX to REM Converter
Convert CSS px and rem using a configurable root font size.