Create a CSS Box Shadow
Drag the sliders to shape a shadow for a card, a button or a modal, stack up to four for a softer, more realistic depth, and copy the box-shadow line into your CSS.
- Free
- Runs in your browser
- Up to 4 layers
- No sign-up
How It Works
Design a shadow in three steps.
Shape the shadow
Set the offsets, blur, spread, color and opacity.
Stack layers
Add more shadows for depth, or tick Inset for an inner shadow.
Copy the CSS
Paste the box-shadow line into your stylesheet.
What each box-shadow value does
A shadow is written as horizontal offset, vertical offset, blur, spread and color, for example 0 10px 25px -5px rgba(15, 23, 42, 0.25). Offsets move it, blur softens its edge, spread grows or shrinks it before blurring, and the color's alpha sets how dark it is. Several shadows separated by commas are drawn on top of each other, which is how design systems get soft, natural-looking depth.
Shadows cost little to draw but large blurs on many elements can slow scrolling on low-end phones. Keep blur values moderate on long lists.
Offset
A positive vertical offset puts the light above, which is what most interfaces assume.
Blur and spread
A negative spread with a large blur gives the soft floating look used on cards.
Up to four layers
Combine a tight, darker shadow with a wide, faint one for realistic depth.
Inset
Draws the shadow inside the box, for pressed buttons and input fields.
Convert PDF Files and File Formats
Find the perfect online tool to combine PDF files, compress documents, and handle your daily workflow effortlessly.
PDF Tools
All your PDF needs in one place
- Merge PDF
- Organize PDF
- Split PDF
- Compress PDF
- Convert to Word
- Convert to Image
Image Tools
Edit and optimize your images
- Resize Image
- Compress Image
- Convert Format
- Crop Image
- Add Watermark
- Remove Background
Word Tools
Work with Word documents
- Convert to PDF
- Merge Documents
- Split Documents
- Compress File
- Edit Text
- Add Watermark
Excel Tools
Process Excel spreadsheets
- Convert to PDF
- Convert to CSV
- Merge Sheets
- Split Sheets
- Compress File
- Clean Data
Why Use This Generator
Get the shadow right by eye.
Live preview
Change the box color, background and corner radius to match your design.
Layered shadows
Up to four shadows in one declaration.
Clean CSS
One box-shadow line with rgba() colors, ready to paste.
No sign-up
Free, in your browser.
Frequently Asked Questions
Questions people ask about the Box Shadow Generator.
Use a small vertical offset, a large blur, a negative spread and low opacity, for example 0 10px 25px -5px at 25% opacity. Adding a second, tighter shadow makes it look more natural.
box-shadow follows the element's box, including its border radius. The CSS filter drop-shadow() follows the visible shape, such as the outline of a transparent PNG, but has no spread or inset.
Offset it toward that side and use a negative spread about equal to the blur, for example 0 8px 6px -6px for a shadow only at the bottom.
No. A shadow does not take up space or move other elements, but it can be clipped by a parent with overflow: hidden.
Related Text & Developer Tools
More small utilities that run in your browser.
CSS Gradient Generator
Build linear, radial and conic gradients for CSS.
Color Converter
Convert colors between HEX, RGB, HSL and HSV.
Contrast Checker
Check text and background colors against WCAG.
PX to REM Converter
Convert pixels to rem and rem to pixels.
Unit Converter
Convert length, weight, temperature, volume and more.