Box Shadow Generator (CSS)
Generate professional CSS box-shadow values (soft, inset, and multi-layer) and copy the code instantly.
Preview
Tune offsets, blur, spread, and opacity. Use presets for quick starting points.
Generated CSS
Copy the declaration and paste it into your CSS (or Tailwind config/custom class).
Shadow layers
Build multi-layer shadows for more realistic depth. Order matters (first layer is drawn on top).
Layer 1
CSS: 0px 14px 28px -10px rgba(15, 23, 42, 0.22)
CSS box shadow generator (copy box-shadow code)
This box shadow generator helps you create clean, modern box-shadow styles for cards, sections, buttons, and UI components. Instead of guessing values, you can tune X/Y offset, blur, spread, and opacity, then copy the final CSS declaration. Multi-layer shadows are especially useful for “soft card” depth commonly used in modern dashboards and landing pages.
Want a step-by-step walkthrough with practical settings? Read the guide: Box Shadow Generator (CSS) – Create Soft Card Shadows.
How to use the box-shadow generator
- Pick a preset (Soft card / Strong / Inset / Glow) or start from scratch.
- Adjust X/Y offset for direction and distance.
- Increase blur for softer edges; adjust spread for shadow size.
- Add a second layer to make the shadow more realistic.
- Copy the generated CSS and paste it into your stylesheet.
Practical tips (long-tail SEO)
If you’re trying to create a soft shadow CSS style for cards, keep opacity low (often 10–25%) and prefer two layers over one heavy shadow. For buttons, try smaller blur values and less spread. For input fields, an inset box shadow can create a clean “pressed” effect without adding extra borders.
FAQs
What is CSS box-shadow used for?+
box-shadow adds depth to UI elements like cards, buttons, modals, and inputs. It helps separate content from the background and improves visual hierarchy.
How do I make a shadow look more realistic?+
Use 2 layers: one small/soft shadow close to the element, and one larger/lighter shadow for depth. Keep opacity low and avoid overly sharp edges.
What is an inset shadow?+
An inset shadow is drawn inside the element. It’s useful for pressed buttons, input fields, and subtle inner depth.
Is this tool free to use?+
Yes. ToolsOfWeb tools are free to use.
Do I need to create an account?+
No. No sign-up is required.
Related Tools
Want guides and tips? Visit the ToolsOfWeb blog or go back to the homepage.
Related guide
Read guide: Box shadow generator (soft card shadows, inset, multi-layer) →