Box Shadow Generator
Design layered CSS box shadows with a live preview.
Good shadows add depth and make interfaces feel tangible.
About Box Shadow Generator
Design smooth, realistic CSS box shadows with sliders for offset, blur, spread, colour and opacity. Stack multiple shadow layers, toggle inset shadows and copy the finished box-shadow declaration straight into your stylesheet.
Good shadows add depth and make interfaces feel tangible. This box shadow generator lets you tune offset, blur, spread, colour and opacity with sliders, stack several shadow layers for a more realistic look, and copy the exact CSS.
How to use Box Shadow Generator
- Adjust the horizontal and vertical offset, blur and spread of the first shadow.
- Set its colour and opacity, and tick Inset if you want an inner shadow.
- Add more layers to build soft, layered shadows.
- Copy the box-shadow declaration into your CSS.
Key features
- Multiple stacked shadow layers.
- Inset shadows and negative spread.
- Live preview with adjustable box colour, background and corner radius.
- Clean, ready-to-paste CSS.
Common use cases
- Cards, modals and dropdowns that need subtle elevation.
- Neumorphic or pressed-in button effects using inset shadows.
- Matching a shadow style across a design system.
Frequently asked questions
Related tools
Color Picker
Click any pixel in an image to get its exact color code.
CSS Gradient Generator
Create linear, radial and conic CSS gradients visually.
Color Converter
Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH.
Color Contrast Checker
Check WCAG contrast ratio between text and background colours.