box-shadow is a CSS property that adds one or more shadow effects behind an element, creating the illusion of depth on an otherwise flat 2D page. It works on almost any HTML element and supports both external shadows (cast outside the element) and internal shadows using the inset keyword. The shadow follows the shape of the element, including any rounded corners set with border-radius.

The full syntax is box-shadow: inset offset-x offset-y blur spread color;. Each value does the following:

offset-x shifts the shadow left or right. Positive values move it right, negative values move it left.
offset-y shifts the shadow up or down. Positive values move it down, negative values move it up.
blur controls how soft the shadow edges are. A value of 0 produces a hard-edged shadow; higher values produce a more diffuse blur. Negative values are not allowed.
spread expands or contracts the shadow. Positive values make it larger than the element; negative values shrink it.
color sets the shadow colour in any valid CSS format - HEX, RGB, RGBA, HSL, and so on. Using RGBA lets you control opacity at the same time.
inset is an optional keyword that moves the shadow to the inside of the element rather than outside. It can appear at the beginning or the end of the value.

You can stack as many shadows as you like on a single element by listing them in one box-shadow declaration, separated by commas. For example: box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.5); Shadows are rendered from front to back - the first value in the list sits on top. This makes it easy to create layered or neumorphic effects without needing multiple elements.

Blur controls the softness of the shadow's edges. It does not change the shadow's size - it only affects how sharply or gradually the shadow fades out. A blur of 0 produces a perfectly crisp shadow; increasing it makes the edges progressively more feathered.

Spread changes the actual size of the shadow relative to the element. A positive spread makes the shadow extend further in all directions; a negative spread shrinks it so the shadow is smaller than the element. The two are independent - you can have a large, sharp shadow (high spread, zero blur) or a small, soft one (negative spread, high blur).

By default, box-shadow renders outside the element. Adding the inset keyword moves the shadow to the inside, making the element appear pressed in or recessed rather than raised. Inset shadows are drawn on top of the element's background but behind its content and border. They are commonly used to create pressed-button states, inner glow effects, and depressed input fields. The inset keyword can be placed at the beginning or the end of the shadow declaration.

Set the offset in the direction you want the shadow to appear, then use a negative spread value to cancel the shadow on the other sides. For example, a shadow on the bottom only: box-shadow: 0 8px 6px -6px rgba(0,0,0,0.4); The -6px spread pulls the shadow inward enough to hide it on the left, right, and top, leaving only the bottom edge visible. Adjust the spread and blur values together to tune how clean the single-side effect looks.

Set box-shadow: none; to remove a shadow entirely. This is commonly used in hover or focus states to strip a shadow added in a default state, or to override a shadow inherited from a parent stylesheet or framework. You can also use box-shadow: 0 0 0 0 transparent; if you need a value that animates cleanly from a shadow to no shadow using CSS transitions.

Yes, box-shadow is fully animatable. You can transition it smoothly using transition: box-shadow 0.3s ease; on the element, then change the shadow value in a :hover or :focus state. For best performance, avoid transitioning large or highly blurred shadows on many elements at once - box shadows are rendered by the browser's compositor and heavy blur values can impact frame rate on lower-end devices. A common optimisation is to use a :after pseudo-element with the shadow and transition its opacity instead, which is cheaper for the browser to render.

No. box-shadow is purely visual and does not affect the document layout. The shadow is painted outside the element's box model, so it does not push other elements away or add to the computed width, height, margin, or padding. This is different from outline and border, which can interact with layout in different ways. If you need the shadow area to act as spacing, you will need to add explicit padding or margin separately.

box-shadow always follows the rectangular box of the element (including border-radius), regardless of the element's visible content or transparency. filter: drop-shadow() follows the actual rendered shape of the element, including transparent areas. This makes it much more useful for irregular shapes like PNG images with transparency, SVG icons, or elements styled with clip-path. The trade-off is that drop-shadow() does not support the inset keyword or multiple stacked shadows, and it applies to the entire element including its children, which can produce unexpected results on complex components.

Any valid CSS color format works - HEX, RGB, RGBA, HSL, HSLA, or named colors. For most practical use, rgba() is the most convenient because it lets you set both the color and the opacity in a single value, giving you fine control over how strong the shadow appears. Using a semi-transparent dark color like rgba(0, 0, 0, 0.15) for shadows tends to look more natural than a fully opaque color, because it blends with whatever background is behind the element.