CSS Box Shadow Generator
Design beautiful shadows visually — live preview, multiple layers, RGBA colors, and instant CSS code output.
Build Your Shadow
Shadow Layers
Live Preview
Generated CSS
How to Use the CSS Box Shadow Generator
- Set Horizontal Offset
Use the Horizontal Offset slider to move the shadow left or right. Positive values push the shadow right; negative values push it left.
- Set Vertical Offset
Adjust the Vertical Offset slider to position the shadow above or below the element. Positive values move it down; negative values move it up.
- Adjust Blur and Spread
Set the Blur Radius for softness and the Spread Radius to expand or contract the shadow size relative to the element.
- Choose Shadow Color and Opacity
Pick a shadow color using the color picker and adjust the opacity slider to control how transparent the shadow appears.
- Toggle Inset and Multiple Layers
Enable the Inset toggle to create an inner shadow effect. Use the Add Layer button to stack multiple shadow layers.
- Copy the CSS Code
Click Copy CSS to copy the generated box-shadow property to your clipboard and paste it directly into your stylesheet.
Key Features
Live Preview
See your shadow update in real time as you move any slider — no clicking needed, instant visual feedback.
Multiple Shadow Layers
Stack multiple box shadows on a single element. Add as many layers as you need and manage them individually.
RGBA Color Support
Combines your chosen hex color and opacity into a proper rgba() value automatically in the generated CSS.
Inset Shadow Mode
Toggle inset shadows with one click to create pressed, embossed, or inner glow effects on any element.
Preview Backgrounds
Switch the preview background between light, dark, gradient, and grid to check how your shadow looks in any context.
One-Click Copy
Copy the complete box-shadow CSS declaration to your clipboard instantly — ready to paste into any stylesheet.
CSS Box Shadow Syntax Explained
| Value | Required | Description |
|---|---|---|
| inset | No | If present, shadow renders inside the element (inner shadow) |
| offset-x | Yes | Horizontal distance of the shadow. Negative = left, Positive = right |
| offset-y | Yes | Vertical distance of the shadow. Negative = up, Positive = down |
| blur-radius | No (default 0) | Higher value = softer, larger shadow edge. Cannot be negative. |
| spread-radius | No (default 0) | Positive = shadow expands, Negative = shadow contracts |
| color | No (default currentColor) | Shadow color. Use rgba() for transparency control. |
When multiple shadows are listed, the first shadow in the list is drawn on top. Shadows do not affect page layout — they are rendered outside the normal flow and do not push surrounding elements.
Practical Examples
What Is CSS Box Shadow?
The CSS box-shadow property attaches one or more drop shadows to an element's box. Unlike the older filter: drop-shadow() or image-based shadow tricks, box-shadow is rendered natively by the browser at full hardware-accelerated speed. It accepts the shadow's horizontal position, vertical position, blur softness, spread size, and color — all in a single declaration. Multiple shadows can be stacked by separating values with commas, with the first shadow appearing visually on top.
The property is foundational to modern web design. It appears in card UIs, modal dialogs, button hover effects, input field focus states, and advanced design systems like neumorphism and glassmorphism. Understanding its parameters allows designers and developers to communicate depth, elevation, and focus without images or SVGs — keeping pages fast and scalable.
Browser support for box-shadow is universal. No vendor prefixes are needed for any currently active browser. The inset keyword enables inner shadows — critical for pressed states and recessed form inputs — while negative spread values allow precise shadow trimming for layered card designs.
CSS Box Shadow — Understood Globally
Want to learn advanced box shadow techniques, neumorphism, and glassmorphism patterns with real CSS examples?
Read the Full CSS Shadow Guide →Frequently Asked Questions
Is this CSS box shadow generator free to use?
What does the Horizontal Offset value do in box-shadow?
What is the difference between blur radius and spread radius?
What does the inset keyword do in CSS box-shadow?
Can I add multiple box shadows to one element?
How do I use RGBA colors in box-shadow?
Does box-shadow work on all browsers?
What is the full CSS box-shadow syntax?
Can I use this tool to create neumorphism or glassmorphism effects?
Does box-shadow affect the element's layout or size?
Recommended Hosting
Hostinger
If you are building a website for your tools, blog, or store, reliable hosting matters for speed and uptime. Hostinger is a popular option used worldwide.
Visit Hostinger →Disclosure: This is a sponsored link.