Box Shadow Generator

The box-shadow property is one of those CSS workhorses that does far more than most developers give it credit for. At first glance it seems simple — you want a drop shadow behind a card, so you write `box-shadow: 0 4px 12px rgba(0,0,0,0.15)` and move on. But box-shadow can do layered shadows for realistic depth, coloured glows for neon effects, and inset shadows for recessed or pressed-in looks. It accepts up to six values: horizontal offset, vertical offset, blur radius, spread radius, colour, and the optional `inset` keyword. Getting the combination right by trial and error in a text editor — save, refresh, squint, tweak, repeat — is a frustrating loop that this tool eliminates by giving you real-time visual feedback on a live preview box. Understanding what each parameter does is key to using this tool effectively. The horizontal offset shifts the shadow right (positive values) or left (negative values) along the x-axis. The vertical offset shifts it down (positive) or up (negative) — this is the parameter that creates the illusion of a light source, because shadows cast downward suggest overhead lighting and shadows cast upward suggest light from below. The blur radius controls how soft or hard the shadow edge appears: a value of zero gives a crisp, sharp-edged shadow that looks like a flat duplicate of the element, while higher values spread the shadow's edge into a smooth, gradual fade — the Gaussian blur that gives modern UI its signature softness. The spread radius is the parameter most people discover last, and it is a genuine design superpower. Positive spread values cause the shadow to grow larger than the element — this lets you create a shadow that extends beyond the box without making the blur radius enormous, which would wash out the colour. Negative spread values shrink the shadow inward, which is how you create the optical illusion of an element sitting inside a recessed area when combined with the inset keyword. The inset toggle switches the shadow from an outer drop shadow (the default, where the shadow appears outside the element's border box) to an inner shadow that renders inside the element. Inset shadows are the foundation of skeuomorphic design details — they make buttons look pressed when clicked, make input fields look recessed into the page, and create the inner glow that makes glassmorphism effects pop. Combining multiple box-shadow declarations separated by commas (a feature supported by CSS but deliberately kept single-shadow in this tool to keep the interface simple) lets you stack shadows for complex lighting. Each shadow in a comma-separated list is rendered from back to front, with earlier shadows appearing behind later ones — this is the technique behind the popular "layered shadow" trend where a series of increasingly softer, larger shadows of the same colour create a smooth gradient-like depth effect that feels more natural than a single shadow. All colour handling uses rgba so you can control opacity independently from hue. The alpha channel slider on this tool gives you a 0-to-1 range that maps directly to the fourth value in `rgba(r, g, b, a)`. Lowering opacity is usually the better way to make a shadow feel subtle — a pure black shadow at 0.08 opacity looks infinitely more natural than a grey shadow at full opacity because shadows in the real world are not flat grey shapes; they are semi-transparent darkening of whatever surface they fall on. The blur radius and spread radius values are always expressed in pixels (`px`) because shadows tied to viewport units or percentages behave unpredictably across screen sizes — a 4px blur on a 320px-wide mobile screen is the same physical softening as on a 2560px desktop monitor, which is exactly what you want for UI consistency. Browser support for box-shadow is universal across all modern browsers, going back to IE9 with the standard syntax. Vendor prefixes (`-webkit-box-shadow`, `-moz-box-shadow`) have not been needed for over a decade, but this tool outputs the unprefixed standard property. For older projects, you can prefix manually if needed. The `inset` keyword must appear either at the beginning or the end of the value list — this tool places it at the beginning for readability, producing `box-shadow: inset 5px 5px 15px rgba(0,0,0,0.3)` rather than the equally valid `box-shadow: 5px 5px 15px rgba(0,0,0,0.3) inset`. Performance-wise, box-shadow can trigger repainting when animating because the browser must recalculate the shadow bitmap for every frame — animating the `transform` property instead and using box-shadow only for static styling is the recommended optimisation pattern. If you are building a shadow-heavy UI with dozens of cards each having their own shadow, be aware that large blur radii and multiple stacked shadows increase the GPU fill cost, especially on low-end mobile devices. This tool lets you preview the exact pixel values so you can make informed decisions about how heavy a shadow to use in production.