HelperCrateBox Shadow Generator
Tune offset, blur, spread and color for CSS box shadows with live preview.
Your files never leave your device. Everything runs in your browser.
What Box Shadow Generator does
Box Shadow Generator is a live editor for the CSS box-shadow property. Six controls — X offset, Y offset, blur, spread, colour and opacity — update the sample card and the CSS line as you move them, and one button copies the finished declaration.
The default state produces box-shadow: 0px 12px 30px -4px rgba(0, 0, 0, 0.35);, a soft shadow falling downwards. Reading any box-shadow value is easier once you know the order of its five parts: horizontal offset, vertical offset, blur radius, spread distance and colour. So 0px 0px 20px 0px rgba(255, 0, 0, 0.5) — a verified output for the red glow preset — is a shadow with no displacement, a medium blur and no spread.
Sliders cover the practical ranges: X offset, Y offset and spread run from -50 to 50 pixels, blur from 0 to 100, and opacity from 0 to 100 percent, which is written into the colour as an rgba alpha value. Everything is computed in the page, so nothing is uploaded or saved.
How to use Box Shadow Generator
- Drag X offset and Y offset to move the shadow; positive values push it right and down.
- Raise Blur for softness — 0 keeps a hard-edged copy of the card.
- Use Spread to grow the shadow with positive values or shrink it with negative ones.
- Pick a Color and set Opacity % to fade it from transparent to solid.
- Watch the preview card, then press Copy CSS to copy the box-shadow declaration.
Features
- Six controls with live numeric readouts next to each label.
- Sliders cover X, Y and spread at -50 to 50 pixels, blur at 0 to 100, opacity at 0 to 100 percent.
- Live preview card and CSS line updated together on every change.
- Colour picker converts a hex choice into an rgba colour with your chosen alpha.
- Output is a single ready-to-paste declaration: box-shadow with offsets, blur, spread and rgba colour.
- Copy button and fully local operation — nothing is uploaded or stored.
Tips and common mistakes
- Order matters: the first two lengths are the offsets, the third is blur and the fourth is spread. Missing the fourth number is the most common hand-editing mistake.
- The default uses a negative spread of -4px. Negative spread contracts the shadow before blurring, which is what produces the tight, modern card shadow; positive values inflate it.
- Opacity is written as an rgba alpha value: 35 percent becomes 0.35. An empty or invalid opacity counts as 0, and values above 100 clamp to fully opaque.
- For a glow rather than a shadow, set both offsets and spread to 0 and raise the blur: 0 0 20px 0 with red at 50 percent opacity gives rgba(255, 0, 0, 0.5) in the output.
- The editor writes one shadow at a time. CSS accepts a comma-separated list, so build each layer here and combine the declarations by hand for layered depth.
- The tool always writes px units and an rgba colour, so the result is portable and does not depend on the preview card size.
- If a shadow looks clipped at the edges of a container, that is overflow in the layout, not the declaration — give the element room instead of shrinking the blur.
Frequently asked questions
What order do the five parts of a box shadow go in?
Horizontal offset, vertical offset, blur radius, spread distance, then colour. The two offsets are required; blur and spread can be omitted, and the colour may be written before or after the lengths, but this tool always emits the conventional order.
Why is the colour written as rgba instead of hex?
Because the opacity control needs an alpha channel, and rgba expresses that directly with values such as rgba(0, 0, 0, 0.35). If you prefer hex, the equivalent eight-digit form appends the alpha to the colour by hand.
Can I make an inset shadow?
Not with the controls, but the keyword is easy to add: insert inset at the start of the copied value, before the offsets, and the browser draws the shadow inside the element.
Can I combine several shadows on one element?
Yes in CSS — separate them with commas, and the first shadow paints on top. The generator edits one shadow at a time, so copy each layer separately and merge the values.
Why does the spread control allow negative values?
Spread shrinks the shadow before it is blurred. A small negative spread, like the default -4px, keeps a shadow close to the element, which reads as more realistic than a large evenly blurred one.
Is anything uploaded?
No. The preview and the declaration are computed in your browser and nothing is stored or sent anywhere.
Related text tools: CSS Gradient Generator, Color Converter, Image Color Picker.
The preview and CSS are generated entirely in your browser — nothing is uploaded or stored.