Color Tools
Gradient Generator
Build multi-stop linear and radial CSS gradients with angle control, curated presets and one-click CSS output.
Use Tool
CSS Tools
CSS Box Shadow Generator Online
Design CSS box-shadow effects visually. Adjust offset, blur, spread, opacity, colour and inset with a live preview and instant CSS copy.
Box Shadow Parameters
0px
12px
28px
-4px
12%
Elevation presets
drop-shadow
Live UI card preview
Adjust the sliders to preview elevation and depth.
Generated CSS declaration
How to Use the CSS Box Shadow Generator
Follow these three steps to process your assets directly in the browser.
1
Adjust offset, blur and spread
Move the sliders and watch the preview card respond in real time.
2
Tune colour, opacity and inset
Pick a shadow colour, refine alpha opacity, or switch to inset for a recessed well effect.
3
Copy the CSS
Grab the finished box-shadow declaration for your stylesheet.
Key Features of the CSS Box Shadow Generator
Full six-parameter control
X offset, Y offset, blur radius, spread radius, RGBA colour with opacity and the inset keyword.
Designer elevation presets
Soft SaaS card, floating modal, crisp brutalist offset and recessed input well.
Customisable preview stage
Change both the card colour and the stage colour to test light and dark UI contexts.
Automatic RGBA conversion
The exact rgba() value is computed from your hex colour and opacity slider.
How the css box shadow generator works and best practices for modern web projects.
How the box-shadow property works
The CSS box-shadow property attaches one or more shadows to an element frame and follows its border-radius. Each parameter controls a different part of the result:
- Horizontal offset: positive values push the shadow right, negative values push it left.
- Vertical offset: positive values cast the shadow downward, simulating overhead lighting.
- Blur radius: 0px gives a razor-sharp edge, larger values diffuse the shadow outward.
- Spread radius: positive values enlarge the shadow before blurring, negative values contract it for realistic directional elevation.
- Inset keyword: flips the shadow inside the border box to create a pressed or recessed look.
CSS Box Shadow Generator — Frequently Asked Questions
Use low opacity between 0.06 and 0.14, a modest vertical offset of 8-16px with a generous 20-32px blur, and a small negative spread of -2px to -4px so the shadow does not bleed equally on all four sides.
Adding inset draws the shadow inside the element border instead of outside it, creating a pressed button or recessed input appearance.
Yes. Any box-shadow curves around the element border-radius automatically with no extra clipping rules.