Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
CSS box-shadow takes several values in a specific order — offset, blur, spread, and color — and converting a hex color plus an opacity percentage into the rgba() format it expects is a small but easy-to-fumble conversion step.
This generator builds a complete box-shadow declaration from your chosen offset, blur, spread, color, and opacity.
How it works
Enter the horizontal and vertical offset, blur radius, spread radius, shadow color, and opacity percentage, plus whether the shadow should be inset. The generator converts the hex color and opacity into an rgba() value and assembles the full box-shadow declaration.
- Enter horizontal offset (px).
- Enter vertical offset (px).
- Enter blur radius (px).
- Enter spread radius (px, optional).
- Enter shadow color.
- Enter opacity (%).
- Enter inset shadow?.
- Click Calculate to see your results.
Examples
Soft drop shadow
A 2px right, 4px down offset with 6px blur and 20% black opacity produces box-shadow: 2px 4px 6px 0px rgba(0, 0, 0, 0.2);, a subtle soft shadow.
Who should use it
- Adding a subtle drop shadow to a card or button component.
- Creating a pressed/recessed inset shadow effect for form inputs.
Industry applications
- Web design and front-end development
- UI/UX design
Advantages
- Handles the hex-to-rgba color conversion automatically.
- Supports both outer and inset shadow styles.
Limitations
- Generates a single shadow layer — CSS supports comma-separating multiple box-shadow values for layered effects, which would need manual combination.
Common mistakes to avoid
- Confusing blur radius (softens the shadow's edge) with spread radius (changes the shadow's overall size).
- Using a fully opaque shadow color, which often looks harsher than a softened, semi-transparent shadow.
Best practices
- Lower opacity values (10-30%) combined with a moderate blur radius typically produce more natural, subtle shadows than a fully opaque, sharp-edged one.
Tips
- Real-world shadows are rarely pure black — using a very dark version of the background color (rather than pure #000000) for the shadow color often looks more natural and less harsh.