CSS Box Shadow Generator
Create CSS box shadows with real-time preview. Configure multiple shadow layers, color, blur, spread and inset. Copy the CSS code.
How to use?
Tweak the parameters of each shadow layer and watch the result update in real time. Stacking several layers gives more elaborate effects. Turning on inset switches the shadow to an inner one, with a cutout look.
Create CSS shadows with live preview
The box-shadow property gives depth to cards, buttons and boxes. Getting the values right by hand, though, turns into a trial-and-error exercise, between offset, blur and spread. Here the generator shows the shadow shifting in real time as you tweak each parameter.
You control colour, blur, spread and offset, switch inset mode (the inner shadow) on or off, and stack several layers when you want a more elaborate effect. Once the result reaches the point you were after, one click copies the ready CSS to paste into your project.
Everything happens in the browser. It's a direct tool for designers and developers to add depth to an interface without having to memorise the property's syntax.
Related Tools
CSS Gradient Generator
Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.
CSS Neumorphism Generator
Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.
CSS Glassmorphism Generator
Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.