Box Shadow Generator
Create CSS box-shadow with a visual preview. All in your browser.
About this Box Shadow Generator
Create CSS box-shadow values with a live visual preview. Box shadows add depth and hierarchy to buttons, cards, and modals without extra images or assets. This tool lets you adjust horizontal and vertical offset, blur radius, spread radius, color, and opacity, and optionally create inset shadows—all while seeing the result in real time. Copy the generated CSS with one click and paste it into your stylesheet or design system. No account required; everything runs in your browser so your designs stay private. Perfect for front-end developers, UI designers, and anyone who wants pixel-perfect shadows without guessing values.
Key Features
Live visual preview of the box shadow as you adjust parameters
Control horizontal and vertical offset, blur radius, and spread
Color picker and opacity slider for the shadow color
Inset option for inner shadows (e.g., pressed or recessed effects)
One-click copy of the CSS rule to clipboard
Runs entirely in your browser; no data sent to servers
How to Use
Adjust the sliders for offset X, offset Y, blur, and spread to shape the shadow
Use the color picker and opacity to set the shadow color
Toggle "Inset" if you want an inner shadow instead of an outer one
Watch the preview update in real time
Click "Copy CSS" to copy the box-shadow rule for your stylesheet
Popular Use Cases
Design card and button shadows for web or app UI
Match shadow styles from design tools (Figma, Sketch) in code
Experiment quickly with depth and elevation without writing CSS by hand
Teach or learn how box-shadow parameters affect the visual result
Tips & Best Practices
Subtle shadows (small offset, moderate blur) often look more professional than heavy ones.
Use a slight negative spread to create a softer, more natural edge.
Inset shadows work well for input fields or pressed states.
Frequently Asked Questions
Is data sent to a server?
No. The generator runs entirely in your browser. Your settings and the generated CSS never leave your device.
Can I use the output in Tailwind or other frameworks?
Yes. The copied value is standard CSS (e.g., box-shadow: 0 4px 6px rgba(0,0,0,0.1)). You can use it in plain CSS, Tailwind arbitrary values, or any framework that accepts CSS.
What is the difference between blur and spread?
Blur softens the shadow edge; spread expands or shrinks the shadow size before blur is applied. Larger spread makes the shadow bigger; negative spread can create a tighter, softer halo.