CSS box shadows are one of the most versatile tools in a front-end developer's toolkit. They can make elements appear to float above the page, add subtle depth to cards and buttons, create glowing effects, and even simulate inner light sources. The box-shadow property accepts several values and supports multiple comma-separated layers, giving you tremendous creative flexibility.
How the Box-Shadow Property Works
The CSS box-shadow property accepts values in the order: horizontal-offset, vertical-offset, blur-radius, spread-radius, color. Only the first two are required.
The horizontal offset moves the shadow left or right. A positive value moves it to the right; a negative value moves it to the left.
The vertical offset moves the shadow up or down. A positive value moves it down; a negative value moves it up.
The blur radius controls how soft or sharp the shadow edge is. A value of 0 gives a hard-edged shadow with no blur. Higher values produce a more diffuse, softer shadow.
The spread radius expands or contracts the shadow relative to the element. A positive spread makes the shadow larger than the element. A negative spread makes it smaller and is used for inset shadow effects.
The color is typically a semi-transparent dark color for a natural drop shadow. Using rgba or hsla lets you set the opacity independently of the color. Black at 20 to 30 percent opacity is a good starting point for most shadows.
Multiple Shadow Layers
Box-shadow accepts multiple values separated by commas. Layering shadows of different sizes and opacities produces more realistic and sophisticated results than a single shadow. A common technique is to combine a large, diffuse shadow for the overall depth and a small, sharp shadow for the contact edge.
Inset Shadows
Adding the inset keyword at the beginning of the value draws the shadow inside the element rather than outside. Inset shadows are used for pressed button states, embossed text effects, and inner glow effects.
Neumorphism
Neumorphic design uses two box shadows: one light shadow on the top-left and one dark shadow on the bottom-right, creating the illusion that the element is extruded from the background surface. This effect requires the element and the background to share the same color.
Using the DevHexLab Shadow Generator
Open the tool at /tools/color/shadow-generator. Use the sliders to adjust each value and watch the preview update live. Add multiple layers for complex effects. Copy the CSS when the shadow looks exactly right.
Frequently Asked Questions
Does box-shadow affect layout?
No. Box shadows do not affect the layout flow of the page. They are purely visual and do not take up space in the document.
Can I use box-shadow on text?
Box-shadow applies to the element box, not the text inside it. For text, use the text-shadow property, which follows a similar syntax but without the spread-radius and inset options.
How do I make a glow effect?
Use a spread radius larger than the blur radius, set the color to a vivid or white tone, and use an opacity of 50 to 80 percent. Remove the horizontal and vertical offset so the glow radiates evenly in all directions.
Build the shadow visually, copy the CSS, and never guess values again.