CSS Box Shadow Generator
Design a box-shadow visually — adjust offset, blur, spread, color and opacity with sliders, stack multiple shadow layers, and copy the finished CSS. Everything updates live in your browser.
How to Use the CSS Box Shadow Generator
- Drag the X and Y offset sliders to position the shadow relative to the element.
- Adjust blur (how soft the edge is) and spread (how much the shadow grows or shrinks) to taste.
- Pick a shadow color and set its opacity, and tick "Inset" for an inner shadow instead of an outer drop shadow.
- Click "+ Add Shadow Layer" to stack multiple shadows for richer, more realistic depth effects, then copy the combined CSS.
Why Use This Tool?
Is my design data uploaded anywhere?
No. Every slider, color and checkbox is processed entirely client-side using JavaScript and rendered directly with CSS in your browser. Nothing is sent to a server, logged, or stored — refresh the page and it resets to the defaults.
Why would I stack multiple shadow layers?
The CSS box-shadow property accepts a comma-separated list of shadows, which is exactly how modern design systems create convincing depth — for example, a tight, dark, low-opacity shadow close to the element combined with a larger, softer, lower-opacity shadow further out. Stacking two or three layers like this looks far more natural than a single flat shadow, which is why this tool lets you add and combine multiple layers.
What does "inset" do?
By default, a box-shadow is cast outward from the element, like a card floating above the page. Checking "Inset" flips the shadow to render inside the element's border instead, creating a pressed-in or recessed look — commonly used for input fields, toggle switches, or pressed button states.
Will this CSS work in every browser?
Yes. box-shadow (including multiple comma-separated shadows and the inset keyword) has been supported without vendor prefixes in all modern browsers for many years, including Chrome, Firefox, Safari and Edge. You can paste the generated CSS directly into your stylesheet with no compatibility concerns for current browser versions.