UtilityBase2 min read
How to Design a CSS Box Shadow
Learn how the CSS box-shadow property works, what each value controls, and how to build soft, layered, or inset shadows visually and copy clean code.
What the box-shadow Property Does
The CSS box-shadow property paints a shadow around an elements rectangular frame, following its border-radius so rounded corners stay rounded. It is one of the fastest ways to add depth to buttons, cards, modals, and inputs without extra images or markup.
A single element can carry more than one shadow. You list several shadow definitions separated by commas, and the browser stacks them from first to last, with the first sitting on top. This is how designers build realistic, layered depth instead of one flat gray blur.
Reading the Five Values in Order
A box-shadow is written as a sequence of values with a very specific order: horizontal offset, vertical offset, blur radius, spread radius, and color. So box-shadow: 4px 6px 12px 2px rgba(0,0,0,0.25) means move the shadow 4px right, 6px down, blur it by 12px, expand it by 2px, then tint it with 25 percent black.
The horizontal and vertical offsets set direction: positive x pushes the shadow right, positive y pushes it down, and negative values reverse each axis. Blur softens the edge, so a larger blur reads as a lighter, more diffuse shadow. Spread grows or shrinks the shadow before the blur is applied, letting you make a shadow tighter or wider than the element itself.
Add the keyword inset to move the shadow inside the element instead of behind it. An inset shadow is perfect for pressed buttons, inset fields, and inner glows: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2).
Building a Shadow Step by Step
The generator gives you sliders for every value so you can see the result update live, then copy the exact CSS. You never have to guess pixel amounts or memorize the syntax.
- 1Open the CSS Box Shadow Generator and pick the element preview you want to style.
- 2Set the horizontal and vertical offsets to choose the light direction, such as 0 and 6 for a shadow that falls straight down.
- 3Raise the blur radius until the edge looks as soft as you want, then adjust the spread to make the shadow tighter or wider than the box.
- 4Choose a shadow color and lower its opacity, since real shadows are rarely pure black.
- 5Toggle inset on if you want an inner shadow instead of an outer one.
- 6Add a second shadow layer if you want more realistic depth, then copy the generated box-shadow line into your stylesheet.
Design Tips for Realistic Shadows
Natural shadows are soft and slightly transparent, so reach for a low-opacity color like rgba(0,0,0,0.15) rather than solid black. Keeping the vertical offset larger than the horizontal offset mimics overhead lighting, which is what most interfaces assume.
Layering two or three shadows with different blur and opacity values creates a convincing sense of elevation: a small tight shadow for contact and a larger soft one for ambient depth. This mirrors how tools like Material Design describe elevation levels.
Frequently asked questions
What is the correct order of box-shadow values?
The order is horizontal offset, vertical offset, blur radius, spread radius, then color. For example, box-shadow: 4px 6px 12px 2px rgba(0,0,0,0.25). Add the inset keyword first to make it an inner shadow.
How do I make an inner shadow?
Add the keyword inset before the values, like box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). This paints the shadow inside the element instead of behind it, which is great for pressed buttons and inset fields.
Can one element have multiple shadows?
Yes. List several shadow definitions separated by commas and the browser stacks them, with the first shadow on top. Layering a tight shadow with a wider soft one produces realistic depth.
Tools mentioned in this guide
CSS Box Shadow Generator
Design a box-shadow visually with sliders and copy the CSS instantly.
Developer Tools
CSS Gradient Generator
Build a linear or radial CSS gradient visually and copy the ready-to-paste code.
Developer Tools
Color Picker
Pick a color and get HEX, RGB, and HSL values with shades and tints.
Image Tools
Hex to RGB Converter
Convert colors between HEX, RGB, and HSL — edit any field and the rest update.
Developer Tools
Color Palette Generator
Turn one base color into complementary, analogous, triadic, and shade palettes.
Generators
Keep reading