Free Online CSS Box Shadow Generator
Drag sliders to adjust horizontal offset, vertical offset, blur, spread, color, and inset shadow, with live preview and one-click copy of the box-shadow code.
Key Features
All Parameters Adjustable
Tune horizontal/vertical offset, blur radius, spread, and color in real time.
Inset Shadow
Toggle inset shadow with one click to simulate recessed, embossed, and layered depth.
Preset Effects
Built-in card, button, floating, and neon shadows β apply one and fine-tune.
Copy Ready Code
Generates standard CSS code in real time; click copy to use it in your project.
How to Use
Pick a preset or adjust manually
Start from a preset shadow, or drag the sliders to customize directly.
Fine-tune parameters
Adjust offset, blur, color, and inset; the preview updates in real time.
Copy the code
Click copy to get the box-shadow code and paste it into your CSS.
Frequently Asked Questions
How do I use the box-shadow code?
Paste the copied declaration into an element's CSS rule, for example: .card { box-shadow: your copied value; }.
What is the difference between outer and inset shadow?
Outer shadow sits outside the element edge, while inset shadow sits inside, ideal for recessed, embossed, and pressed-button effects.
Can it generate multiple shadow layers?
The current version generates a single-layer shadow. You can copy the code and stack multiple shadows in CSS using commas.
Does it support transparent background preview?
The preview area follows the site's light/dark theme. Choose a contrasting shadow color so the effect is easy to observe.