Box Shadow Generator
Create CSS box-shadows with a live preview — offset, blur, spread, color and inset — then copy the CSS. Free and in-browser.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);How to use the Box Shadow Generator
- 1Drag the offset-x and offset-y sliders to move the shadow left/right and up/down relative to the box, watching the live preview reposition instantly.
- 2Raise the blur radius to soften the shadow's edge, and adjust spread to grow (positive) or shrink (negative) the shadow evenly on all sides.
- 3Pick a shadow color, then lower its alpha to something like rgba(0,0,0,0.15) so the shadow reads soft instead of a harsh solid black.
- 4Toggle the inset checkbox to render the shadow inside the box for pressed or recessed effects instead of casting it outward.
- 5Add a second shadow layer to combine light and dark shadows into one comma-separated declaration for depth or neumorphism.
- 6Click copy to grab the assembled box-shadow value and paste it straight into a stylesheet, styled-component, or Tailwind arbitrary value.
About the Box Shadow Generator
The Box Shadow Generator turns CSS box-shadow into a set of sliders and a live preview box, so you set offset-x, offset-y, blur, spread, color, and the inset keyword and immediately see the result instead of editing a stylesheet and reloading. Every change redraws the preview instantly: push offset-y positive and the shadow drops below the box; raise spread and the shadow grows evenly on all four sides before blur is applied; drag blur up and the edge fades from hard to diffuse. The tool assembles the declaration in the exact order the CSS spec expects, `offset-x offset-y blur spread color`, and prepends `inset` when you toggle it, so the string you copy is valid production CSS rather than something you have to reorder by hand.
Everything runs in your browser in JavaScript. Your values never leave the page, nothing is uploaded or stored on a server, and once the page has loaded it keeps working offline, so you can dial in shadows for client work you cannot share. The copy button hands you plain text you can drop into a stylesheet, a styled-component template literal, a Tailwind arbitrary value like `shadow-[...]`, or a design token.
Concrete uses: lifting buttons and cards with a soft downward shadow, building neumorphic surfaces by stacking one light and one dark shadow on opposite corners, drawing focus rings, and giving modals and dropdowns depth so they read as floating. A few habits that make output look real: keep blur larger than the offset for a diffuse falloff, use low-opacity color such as `rgba(0,0,0,0.15)` instead of solid black, pair a small negative spread with a positive offset to keep the shape tight, and remember box-shadow accepts a comma-separated list so you can layer several shadows in one declaration.
It saves front-end developers the round-trip to DevTools, lets designers hand engineers exact pixel values instead of a screenshot, and gives anyone learning CSS a hands-on feel for what spread and inset actually do. Correct, restrained shadows are one of the cheapest ways to make a flat layout feel tactile.
Frequently asked questions
What is the difference between blur and spread in this tool?
Blur controls how soft the edge is: 0 gives a hard-edged shadow, and larger values fade it out gradually. Spread resizes the shadow before blur is applied, expanding it outward with positive values or pulling it smaller than the box with negative values. In the preview, try a positive offset-y with a small negative spread to see how professionals keep drop shadows tight and realistic.
How do I make an inner shadow instead of an outer one?
Turn on the inset checkbox. The tool prepends the `inset` keyword to the declaration, which tells the browser to paint the shadow inside the element's padding box rather than casting it outward. That is how you fake recessed text inputs, pressed buttons, and inner glows.
Can I stack more than one shadow?
Yes. CSS box-shadow takes a comma-separated list, and the tool joins each layer for you, painting the first shadow on top. This is the basis of neumorphism, where one light shadow and one dark shadow sit on opposite corners. If you don't add a layer in the tool, you can also copy two outputs and join them with a comma yourself.
Why does the copied shadow look harsher on my site than in the preview?
Almost always the color is solid black at full opacity. Real shadows are semi-transparent, so switch the color to something like rgba(0,0,0,0.15) or drop the alpha, and increase blur relative to the offset. The generator uses the same rgba/hsla string you set, so what you see in the preview is exactly what ships.
Does the output need vendor prefixes to work cross-browser?
No. box-shadow is an unprefixed standard property supported by every current version of Chrome, Firefox, Safari, and Edge, so the tool never emits `-webkit-` or `-moz-` prefixes. Only Internet Explorer 8 and older lacked support, which is no longer a practical concern.
Related tools
Browse all free online tools in Generators and more.
Frequently asked questions
Can I copy the CSS?+
Yes — the ready-to-use box-shadow CSS is copyable with one click.