CSS Box Shadow Generator
How to Use
- Adjust horizontal and vertical offset to position the shadow.
- Set blur radius for softness and spread radius for size.
- Pick a color and adjust opacity for the shadow.
- Toggle inset for inner shadows.
- Copy the generated CSS with the copy button.
CSS Box Shadow
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects including the offset, blur radius, spread radius, color, and whether the shadow is inset. It is commonly used for cards, buttons, modals, and any element that needs visual depth or elevation.
Value Reference
- Horizontal offset: Positive values move the shadow right; negative values move it left.
- Vertical offset: Positive values move the shadow down; negative values move it up.
- Blur radius: Higher values create a softer, more diffused shadow. 0 means a sharp edge.
- Spread radius: Positive values expand the shadow; negative values shrink it.
- Inset: Moves the shadow inside the element, creating a pressed or recessed look.
Use Cases
- Card elevation: Add subtle shadows to cards to create a layered, material-design-inspired interface.
- Button states: Use shadows on hover or active states to give buttons a pressed or raised appearance.
- Modals and popups: Apply strong shadows to overlay elements to visually separate them from the background.
- Neumorphism: Combine inset and outset shadows with matching background colors to create the soft, extruded look of neumorphic design.
- Image galleries: Add shadows to thumbnails or featured images to make them stand out from the page.
Design Tips
- Use multiple layered shadows (light and subtle) for a more realistic and natural depth effect.
- Keep shadow colors desaturated and close to the background color rather than using pure black.
- Large blur values with small offsets create soft, ambient shadows that feel modern and clean.
- Use inset shadows sparingly — they work well for input fields and pressed buttons but can look heavy on large areas.
- Consider performance: complex box-shadows on many elements can affect rendering speed on lower-end devices.
Privacy
All processing happens in your browser. No data is sent to any server.
FAQ
What is the difference between blur radius and spread radius?
Blur radius controls how soft the shadow's edge is — higher values make it more diffused. Spread radius controls the size of the shadow itself, expanding it with positive values and shrinking it with negative ones.
Is the CSS I generate sent anywhere?
No. Both the live preview and the CSS generation happen entirely in your browser, and your values and output are never sent to or stored on any server.
What does the inset option do?
Turning on inset draws the shadow inside the element, creating a pressed or recessed look. It works well for input fields and pressed-state buttons.
Can I stack multiple shadows?
This tool generates a single shadow. To layer several, copy the generated value and combine multiple shadows separated by commas in your CSS.
How do positive and negative offsets affect the shadow?
A positive horizontal offset moves the shadow right and a negative one moves it left; a positive vertical offset moves it down and a negative one moves it up. Picture your light source's direction when setting them.