Developer Design Utility
Box Shadow Generator
Adjust CSS box-shadow values for cards, buttons, modals, and banners in real time, then generate natural SaaS-style shadow code and inline style examples.
Shadow Settings
Adjust the shadow position, blur, spread, color, and opacity to create the depth you want.
Black tones work well for natural card shadows, while colored tones are useful for glow effects.
Outer creates a shadow outside the element, while Inset creates an inner shadow.
The shadow effect you set is reflected here in real time.
Recommended Presets
Quickly apply commonly used shadow combinations for cards, banners, buttons, and glow effects.
Basic Card Shadows
Glow / Accent Effects
Special Shadows
Generated Result
Use the code below in a CSS file, component style, or inline style.
Select your settings, then click Generate CSS Code.
Help
When should I use a Box Shadow Generator?
Use it when you want elements such as cards, buttons, modals, dropdowns, or image boxes to feel elevated above the screen. In SaaS-style UI, subtle shadows help separate sections and create natural visual depth.
box-shadow Value Order
box-shadow is commonly written in the order of X Offset, Y Offset, Blur, Spread, and Color.
- X Offset: The horizontal distance of the shadow
- Y Offset: The vertical distance of the shadow
- Blur: How much the shadow spreads and softens
- Spread: Expands or shrinks the size of the shadow
- Color: The color and opacity of the shadow
Recommended Values
- General card: Y 8px–18px, Blur 24px–48px, Opacity 10%–18%
- Large SaaS-style card: Y 16px–24px, Blur 40px–64px, Opacity 14%–22%
- Button hover: Y 4px–8px, Blur 10px–20px, Opacity 12%–20%
- Glow effect: Use a colored shadow with Blur 36px or higher
Difference Between Outer Shadow and Inset Shadow
Outer Shadow creates a shadow outside the element and makes a card feel elevated. Inset Shadow creates a shadow inside the element, giving a pressed panel or input-field effect.
How do I create a natural card shadow?
Use black or navy tones and keep opacity around 10%–20%. A larger Blur value with Spread set to 0 or a negative value creates a softer card shadow.
How can I create a glow effect?
Choose an accent color such as blue or purple and set Blur to 36px or higher to create a glowing effect.
What should I do if the shadow looks too strong?
Lower the Opacity value or increase the Blur value to make the shadow softer. For general UI, subtle shadows usually look more stable than overly dark shadows.