Who this helps
- People styling cards and buttons
- Developers learning shadow arguments
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.
Box Shadow Generator
Create shadows by adjusting X/Y offset, blur, spread, color, and opacity.
Live Preview
The shadow effect is instantly reflected on the Preview Card.
Copy CSS Code
Copy the generated box-shadow code or download it as a CSS file.
Shadow Type
Outer
Offset
0px / 18px
Blur / Spread
48px / 0px
Opacity
18%
STEP 1
Shadow Settings
Adjust the shadow position, blur, spread, color, and opacity to create the depth you want.
-80px
0px
80px
-80px
18px
80px
0px
48px
120px
-50px
0px
50px
Black tones work well for natural card shadows, while colored tones are useful for glow effects.
0%
18%
100%
Outer creates a shadow outside the element, while Inset creates an inner shadow.
0px
24px
60px
Live Preview
Box Shadow
Preview Card
The shadow effect you set is reflected here in real time.
X / Y
0px / 18px
Blur
48px
Opacity
18%
STEP 2
Recommended Presets
Quickly apply commonly used shadow combinations for cards, banners, buttons, and glow effects.
Basic Card Shadows
Glow / Accent Effects
Special Shadows
STEP 3
Ready
Generated Result
Use the code below in a CSS file, component style, or inline style.
Select your settings, then click Generate CSS Code.
Tune one CSS shadow and keep the exported code current
Set horizontal and vertical offsets, blur, spread, color and opacity for a card or button. Compare an outer shadow with inset, and export the shadow together with the preview corner radius.
When to use this tool
- Make a subtle card shadow.
- Create a recessed inset effect.
From input to a checked result
- 1
Set X and Y offsets, then blur and spread.
- 2
Choose the HEX color and opacity.
- 3
Choose outer or inset and adjust the preview radius.
- 4
Generate CSS once; subsequent edits update the generated code.
- 5
Copy or download the CSS and check it against the actual page background.
Soft card shadow
- Input
- X 0 · Y 8 · blur 24 · spread -8 #000000 · opacity 22% · outer
- Result
- box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.22);
Negative spread reduces the shadow's base size; blur softens its edge.
Inset surface
- Input
- X 0 · Y 2 · blur 6 · spread 0 #000000 · opacity 20% · inset
- Result
- box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
The shadow is drawn inside the box.
How it works
A single box-shadow value combines offsets, blur, spread and an RGBA color. HEX accepts #RGB or #RRGGBB; opacity is converted from percent to alpha. Output targets .shadow-box and includes border-radius. An inline HTML example is enclosed in a CSS comment.
Limitations
- One shadow layer; multiple comma-separated layers require manual editing.
- Blur must be nonnegative, while offsets and spread can be negative.
- The preview has a fixed context; it does not reproduce every component or theme.
- A parent with clipping overflow can hide the outer shadow.
Your data
Settings stay in browser memory. CSS copy and download contain the chosen values; the tool does not upload them.
References
Related tools
- Border Radius Generator
Set corners individually.
- CSS Gradient Generator
Try a different card background.
Frequently asked questions
Does preview radius appear in the CSS?
Yes. The generated rule includes border-radius as well as box-shadow. Remove that declaration if the component already controls its radius.
Why does the color look different on another page?
Transparency blends with the background. Check the shadow against the real light and dark theme backgrounds.
Can I copy the previous result after an invalid color?
No. Invalid color input clears the exportable result; fix the HEX value before copying or downloading.