- What's the difference between blur and spread?
- Blur is how soft the edge of the shadow is — it's the radius over which the shadow fades to transparent. Spread is how big the shadow is before the blur starts — positive spread makes the shadow larger than the element, negative spread makes it smaller. The Material Design elevation system uses negative spread with positive blur to make shadows that look like they come from a light source above and to the side.
- Why do my shadows look harsh?
- Three common reasons. (1) Opacity is too high — try 0.08 to 0.15 instead of the default 0.5 most generators ship with. (2) Color is pure black — real-world shadows tilt slightly toward the surface color underneath, but for screen design dropping opacity is the easier fix. (3) Only one layer — most polished shadows stack two: a tight one for the surface contact, a softer one for the ambient diffusion.
- What does the inset flag do?
- Inset moves the shadow inside the element instead of outside. The same offset/blur/spread/color rules apply, but the shadow renders within the element's border-box. Use it for sunken inputs, pressed-button states, the inside of a pill where you want to suggest depth, or to add subtle texture to a card without using a background image.
- How many shadow layers can I stack?
- CSS itself has no limit. Browsers will render whatever you throw at them, though each layer adds a small paint cost. For UI design, 1-3 layers covers almost every elevation level. Beyond 4 layers you're usually creating an effect (neon, neumorphism) rather than depth — those tools have their own dedicated generators.
- Why are my shadows clipped on one side?
- The parent element has overflow: hidden somewhere up the tree. The shadow renders outside the element's box, so it can be cut off by any ancestor with overflow constraints. Common culprits: a card inside a container with rounded corners and overflow: hidden to clip the image; a flex column with a min-height and overflow set. Fix by adding padding to the parent so the shadow has somewhere to render, or by moving the shadow to the parent.
- Does box-shadow affect element size or layout?
- No. box-shadow is purely visual — it renders outside the box but doesn't add to the element's width, height, or affect the position of sibling elements. That's different from border, which does add to the box-model size unless box-sizing: border-box is set. If a shadow is overlapping a neighboring element and you want space, add margin to the element.
- What's the performance cost of a complex box-shadow?
- On modern hardware, negligible for static elements — the browser composites the shadow onto the same layer as the element. Where it matters: animating box-shadow itself (changing blur or spread on hover) forces a repaint each frame and can stutter on slow devices. The trick designers use: animate opacity on a stacked pseudo-element that has the bigger shadow, instead of animating the shadow values themselves. The result looks the same and runs at 60fps.
- Can I use this shadow on Tailwind, Bootstrap, or styled-components?
- Yes. The output is plain CSS — copy the box-shadow value and paste it into any system that accepts a CSS rule. In Tailwind, drop the value into a shadow- arbitrary value class like shadow-[0_4px_6px_-1px_rgb(0_0_0_/_0.1)]. In styled-components, paste it inside a template literal. In Bootstrap, override .shadow with the generated value in your custom CSS.
- Will the same shadow look the same in every browser?
- Almost. box-shadow has been stable across Chrome, Firefox, Safari, and Edge for over a decade — the rendering matches to within a pixel on standard offsets. The one place to watch: very large spread values combined with very large blur can render slightly differently in older Safari versions. Stick to spread under 20px and blur under 50px for the most consistent results across browsers.
