Generate a CSS box shadow
Design CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code. Live preview, free, runs in your browser.
- Files never leave your device
- Free, no sign-up
- No watermark
About Box Shadow Generator
Create soft, realistic shadows for cards, buttons and modals. Adjust the horizontal and vertical offset, blur, spread and colour of each shadow, stack several layers for depth, and copy the finished box-shadow value. Layered shadows are the secret behind most modern interfaces, and this tool makes them easy to tune by eye.
How to use Box Shadow Generator
- 1
Add a shadow layer.
- 2
Adjust offset, blur, spread and colour with the sliders.
- 3
Add more layers for a richer effect.
- 4
Copy the CSS.
Why use this tool
- Multiple stacked shadow layers.
- Offset, blur, spread, colour and opacity controls.
- Inset shadows for pressed effects.
- Real-time preview.
- Copy-ready CSS.
Frequently asked questions
Combining a tight, darker shadow with a wide, soft one looks far more natural than a single shadow.
Spread grows or shrinks the shadow before it is blurred. Negative spread keeps the shadow tucked under the element.
Static shadows are cheap. Animating large blurred shadows can be costly, so animate opacity of a pseudo-element instead.
Yes. Put the value in an arbitrary class such as shadow-[...] or add it to your Tailwind theme.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. The Box Shadow Generator gives you plain CSS, so it works in stylesheets, CSS modules, styled-components or inline styles in any framework.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.
- Neumorphism GeneratorCreate soft UI neumorphic effects with light and dark shadows: flat, concave, convex or pressed shapes.
- Border Radius GeneratorDesign rounded corners visually: set each corner separately, link them, choose px, % or rem, preview the shape and copy the CSS.
- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Glassmorphism GeneratorCreate frosted glass UI effects with adjustable blur, opacity, saturation and borders, previewed on a vivid background.
- CSS Animation GeneratorBuild CSS @keyframes animations visually: add keyframes with transforms and opacity, set timing and easing, preview live and copy the CSS.