What Is CSS box-shadow?
The CSS box-shadow property adds one or more shadow effects to an HTML element. You can freely configure the shadow position (X and Y offset), softness (blur radius), size (spread radius), color, and opacity. It is widely used to give depth and dimension to card components, buttons, modal dialogs, input fields, and virtually any UI element in modern web design.
Understanding Each box-shadow Parameter
The syntax order is: [inset] offset-x offset-y [blur-radius] [spread-radius] color. The offset-x and offset-y values are required and determine how far the shadow moves from the element. Blur-radius softens the shadow edges, while spread-radius expands or shrinks the shadow area itself. Adding the inset keyword makes the shadow appear inside the element rather than outside it, creating a pressed or recessed look.
Tips for Natural-Looking Shadows
Natural shadows assume light coming from above, so a positive Y offset with moderate blur tends to look most realistic. Semi-transparent colors using rgba produce softer, more elegant results than solid colors. The neumorphism design trend layers both a bright and a dark shadow to create a tactile, embossed effect. For elevated cards, consider using multiple layered shadows with different blur radii for a more natural depth gradient.
Frequently Asked Questions (FAQ)
Q. What is the difference between box-shadow and filter: drop-shadow?
A. box-shadow follows the rectangular box model of the element. filter: drop-shadow() respects the alpha channel of the element — it follows the actual visible shape of a PNG image. Use drop-shadow for irregular shapes like icons or cutout images.
Q. Can I stack multiple shadows?
A. Yes. Separate multiple values with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05); The first shadow in the list is rendered on top.
Q. Does box-shadow affect layout or performance?
A. box-shadow does not affect the layout — the shadow exists outside the normal flow and does not push other elements. However, heavy use in animations can impact rendering performance since it is not GPU-composited. For animated shadows, consider using opacity transitions or a pseudo-element approach instead.