Box Shadow Generator
Create CSS box shadows with visual controls and live preview
Preview
Presets
Shadow Layers
Shadow Controls
CSS Code
All processing happens in your browser.
Embed This Tool
Add this tool to your website with customizable styling
How to Use
- 1 Adjust shadow settings — Use the sliders to control horizontal offset, vertical offset, blur radius, and spread radius.
- 2 Set color and opacity — Choose your shadow color using the color picker and adjust opacity for subtle or bold effects.
- 3 Add more layers — Click 'Add Layer' to create multiple shadows for depth. Toggle inset for inner shadows.
- 4 Copy the CSS — Copy the generated CSS code and paste it into your stylesheet.
Frequently Asked Questions
What is box-shadow in CSS?
The CSS box-shadow property adds shadow effects around an element's frame. It can create depth, highlight elements, or add decorative effects. Multiple shadows can be combined for complex layered effects.
What do the shadow values mean?
Horizontal offset moves the shadow left (negative) or right (positive). Vertical offset moves it up or down. Blur controls softness. Spread expands or contracts the shadow size. Color sets the shadow color with optional opacity.
What's an inset shadow?
An inset shadow appears inside the element instead of outside, creating an 'inner shadow' or pressed-in effect. It's commonly used for input fields, buttons, and creating embossed or engraved looks.
How do I create multiple shadows?
CSS allows comma-separated shadows that stack on top of each other. Use this generator's layer feature to add multiple shadows. Each layer can have different offsets, blur, spread, and colors for complex effects.