CSS Box-Shadow Generator
Adjust the offset, blur, and color below, and this box shadow generator builds the exact box-shadow CSS your button or card needs.
About
About CSS Box-Shadow Generator
A box shadow generator lets you tune a drop shadow visually, offset, blur, spread, and color, instead of editing a box-shadow value blind and refreshing the page to see what changed. This css box shadow generator updates the preview live as you adjust each value, so the code it outputs matches exactly what you were looking at on screen.
The box-shadow property takes up to five values in sequence: horizontal offset, vertical offset, blur radius, spread radius, and color, with an optional inset keyword at the end to flip the shadow from sitting outside the element to sitting inside it instead. The spread radius is the one people usually skip, it expands or shrinks the shadow's shape before blurring is applied, and a small negative spread is a common trick for a tighter, more subtle shadow.
CSS also allows stacking multiple shadows on one element by separating them with commas, which is exactly how design systems like Material Design build their layered elevation effect, several soft, low-opacity shadows combined rather than one hard shadow doing all the work.
Use the sliders to set horizontal and vertical offset, blur radius, and spread, then pick a shadow color with adjustable opacity using the alpha-channel picker. Toggle between an outer drop shadow and an inset shadow with one click, and watch the preview update in real time as you adjust.
A natural-looking shadow is almost never solid black at full opacity, it's usually a low-opacity, fairly blurred shadow that reads as soft rather than harsh. Everything calculates and renders locally in your browser, so there's no delay between adjusting a slider and seeing the actual CSS output update.
FAQ
Frequently asked questions
What does the spread radius actually control?
It expands or contracts the shadow's shape before the blur is applied. A positive value makes the shadow larger than the element casting it, a negative value shrinks it inward, which is a common technique for a subtle, tight hover effect.
Can I stack more than one shadow on the same element?
Yes, CSS supports comma-separated shadow layers on a single box-shadow declaration. This tool is built to perfect one layer at a time, but you can generate several separately and combine them in your own stylesheet for a layered depth effect.
How do I make a shadow look more natural instead of harsh?
Lower the shadow's opacity and increase the blur radius rather than using a solid, fully opaque color. Soft, semi-transparent shadows read as far more realistic than dark, sharp-edged ones.
What's the actual difference between an outer and an inset shadow?
An outer shadow falls outside the element's edges, making it look like it's floating slightly above the page. An inset shadow falls inside the element instead, giving it a pressed-in or recessed appearance.
Is box-shadow supported in older browsers?
The standard box-shadow property has broad support across all modern browsers, Chrome, Firefox, Safari, and Edge included, so the generated CSS renders consistently without needing a JavaScript fallback.
Do CSS shadows hurt page performance?
Generally no, a single shadow has negligible performance impact. Where it can matter is stacking very large blur radii across many animated elements at once, which can cause visible lag on lower-end mobile devices specifically.
Related tools
View all developer tools →CSS clamp() Calculator
Generate a responsive CSS clamp() value from a minimum and maximum size.
Open toolColor Contrast Checker (WCAG)
Check text and background color contrast against WCAG AA and AAA.
Open toolColor Picker
Pick colors from an image with an eyedropper and check contrast ratios.
Open toolPalette Generator
Extract a color palette from any image and export it in one click.
Open tool