Box Shadow Generator
Create and preview CSS box-shadow values visually.
Live CSS previewCopy-ready box-shadowLayered shadowsCopy-ready CSS
CSS box shadow generator tool
Adjust offset, blur, spread, color, and opacity to create a shadow. Use layered shadows for more natural depth.
0px
Negative moves left, positive moves right.
8px
Negative moves up, positive moves down.
24px
Higher values make softer shadows.
-6px
Positive expands, negative contracts.
0.16
Lower values create subtle modern shadows.
18px
Sample shadow presets
Live preview
Preview and output
Preview card
Live box-shadow result
Inset status
Disabled
Active opacity
0.16
Generated CSS
Copy this CSS into your stylesheet or component.
.shadow-box {
box-shadow: 0px 8px 24px -6px rgba(15, 23, 42, 0.16);
}Tool support layer
Generates CSS box-shadow locally in the browser.
Supports X offset, Y offset, blur, spread, color, opacity, and inset.
Supports multiple shadow layers with add and remove controls.
Includes live preview with background, box color, and border radius settings.
Provides copy-ready standard CSS and a Tailwind arbitrary value hint.
Includes sample presets for cards, buttons, modals, inner shadows, and sharp shadows.
Dynamic shadow insights
This shadow is soft because it uses a larger blur radius and lower opacity.
Positive Y offset makes the element look lifted from above.
1 shadow layer currently active.
How CSS box-shadow works
CSS box-shadow adds shadow effects around or inside an element.
Horizontal offset moves the shadow left or right.
Vertical offset moves the shadow up or down.
Blur controls shadow softness.
Spread controls shadow expansion or contraction.
Color and opacity control visibility, while inset changes the shadow to an inner shadow.
Offset, blur, spread, color, and inset explained
X offset: negative moves left, positive moves right.
Y offset: negative moves up, positive moves down.
Blur radius: higher values create softer shadows.
Spread radius: positive expands the shadow, negative contracts it.
Color: dark neutral colors with low opacity often feel modern.
Inset: creates an inner shadow effect inside the element.
Layered shadows and design-system notes
Real shadows are often softer and layered.
One small shadow can define an edge.
One larger shadow can create depth.
Consistent presets help a design system feel polished.
Dark mode shadows may need different opacity or background treatment.
Excessive shadows can make interfaces feel cluttered.
Common box-shadow examples
Subtle card shadow
Button hover shadow
Modal elevation shadow
Image shadow
Inset input shadow
Sharp offset shadow
Soft panel shadow
Layered elevation shadow
Web design and UI use cases
Cards
Buttons
Modals
Dropdowns
Image frames
Pricing tables
Dashboards
Forms
Navigation panels
Callout boxes
Privacy and local processing notes
Local CSS generation
Shadow values are generated locally in your browser. No account is required, generated CSS is not sent to a server, and copied CSS stays under your control.
Method explanation
1. Choose shadow offset, blur, spread, color, opacity, and inset settings.
2. Preview the shadow on a sample element.
3. Add additional shadow layers if needed.
4. Combine each layer into a valid CSS box-shadow value.
5. Show copy-ready CSS output.
6. Copy the CSS into a stylesheet, component, or design system.
Frequently Asked Questions
Related tools