CSS Box Shadow Generator — Visual Shadow Builder

The CSS box-shadow shorthand accepts up to six values: the optional "inset" keyword, horizontal offset (x), vertical offset (y), blur radius, spread radius, and color. The horizontal offset moves the shadow left (negative) or right (positive) of the element. The vertical offset moves it up (negative) or down (positive). The blur radius controls the softness of the shadow edge — 0 produces a hard-edged shadow, while larger values create softer diffusion. The spread radius expands (positive) or contracts (negative) the shadow from the element's bounding box; a spread of -4px combined with blur creates a focused, directional shadow that does not extend beyond the element edges. The color value accepts any CSS color, including rgba() for translucent shadows — which is almost always preferable to opaque shadows, as real shadows are always partially transparent. The "inset" keyword flips the shadow to the inside of the element, creating pressed or recessed effects.

CSS box-shadow supports three distinct design modes. Drop shadows (the default) simulate a light source casting the element's shadow onto a surface below or behind it. A realistic drop shadow uses a slight vertical offset, moderate blur, no spread, and an rgba color — for example: 0 4px 12px rgba(0,0,0,0.15). Inner shadows (using the "inset" keyword) make the element appear pressed into the page, useful for active states on buttons, input fields, and inset panels. Layered shadows use CSS's comma-separated multiple-value syntax to stack several box-shadows on a single element. Layering two or three shadows of different sizes and opacities produces dramatically more realistic, depth-rich results than a single shadow: a tight dark shadow near the element combined with a large, light shadow farther away mimics the way ambient and directional light interact in the physical world.

Google's Material Design system introduced the concept of elevation — assigning each UI component a height above the base surface, with shadow size corresponding to elevation level. Cards rest at elevation 2, floating action buttons at elevation 6, dialogs at elevation 24. Higher elevation means larger blur radius and larger shadow, simulating the greater distance a light source must traverse. Adopting this principle in your own designs creates visual consistency: elements that should appear "above" others in the interaction hierarchy receive larger shadows, while background and container elements use minimal or no shadow. The result is a legible depth hierarchy that users can perceive immediately without explicit borders or separators.

Neumorphism (or soft UI) is a design style that simulates elements extruding from or pressed into a uniform-color surface. It requires two shadows on each element: one light shadow (white or near-white at low opacity) on the top-left and one dark shadow (near-black at low opacity) on the bottom-right, or vice versa for pressed states. The element background must match the container background color for the illusion to work. For example, on a light gray (#e0e5ec) background: box-shadow: 6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.7). Neumorphism works best at larger component sizes with subtle shadows; it becomes unreadable at small sizes or high-contrast color schemes. Accessibility concerns apply: neumorphic buttons can be difficult to distinguish from the background for users with low vision.

Box shadows are one of the most performant ways to communicate interactive state changes because they do not trigger layout reflow — only the compositing step of the rendering pipeline is affected. Hover states typically increase shadow size to suggest elevation: transition box-shadow from a small, tight shadow to a larger, softer one on :hover. Active/pressed states typically switch from an outer shadow to an "inset" inner shadow, creating a physically plausible pressed-into-the-surface effect. Focus rings — the accessibility indicators that appear when keyboard users navigate — are increasingly implemented with box-shadow rather than outline, because box-shadow respects border-radius and can be styled with brand colors. A typical focus ring: box-shadow: 0 0 0 3px rgba(66,153,225,0.6). Always maintain visible focus indicators for keyboard accessibility compliance.