CSS Box-Shadow Generator
Visually design CSS box-shadows with offset, blur, spread, color, and inset — stack multiple layers and copy the ready-to-use CSS.
CSS
box-shadow: 0px 8px 24px -4px #00000040;
About this tool
The CSS box-shadow property takes a series of values — horizontal and vertical offset, blur radius, spread radius, a color, and optionally the inset keyword — and small changes to any of them dramatically alter how a shadow looks. This generator lets you dial those values in with sliders and see the result on a live preview box in real time, so you can craft exactly the depth you want without trial-and-error reloads. You can stack multiple shadow layers (comma-separated in CSS), which is the secret behind realistic, soft, layered shadows used in modern design systems. Use an rgba or 8-digit hex color to control opacity. When it looks right, copy the generated CSS straight into your stylesheet.
How to use it
- Adjust the X/Y offset, blur, and spread sliders.
- Set the shadow color (use rgba or #rrggbbaa for opacity).
- Add more layers for richer, softer shadows.
- Copy the generated box-shadow CSS.
Frequently asked questions
- What do the box-shadow values mean?
- In order: horizontal offset, vertical offset, blur radius, spread radius, then color. Positive offsets push the shadow right and down. Blur softens the edge; spread grows or shrinks the shadow’s size. The optional "inset" keyword draws the shadow inside the element.
- How do I make a soft, realistic shadow?
- Stack multiple layers with increasing offset and blur but decreasing opacity. A tight, dark layer near the element plus a larger, fainter layer farther out mimics how real light scatters, which looks far more natural than a single harsh shadow.
- How do I control shadow opacity?
- Use a color with an alpha channel — either rgba(0,0,0,0.25) or an 8-digit hex like #00000040. Lower alpha makes a subtler shadow; pure #000000 is usually too harsh for UI.
- What does inset do?
- The inset keyword draws the shadow inside the element’s box rather than outside, creating a pressed-in or inner-glow effect. It is useful for inputs, wells, and active button states.
- Can I use negative spread?
- Yes. A negative spread shrinks the shadow smaller than the element, which combined with a vertical offset produces a tight shadow that only peeks out one side — a popular subtle card style.
- Is this CSS standard?
- Yes, box-shadow is fully supported across all modern browsers. The generated value is plain CSS you can paste into any stylesheet or inline style with no prefixes needed.