Box Shadow & Border Radius Generator

About CSS Box Shadows

The box-shadow CSS property adds depth and dimension to elements. It accepts multiple comma-separated shadow layers, each with horizontal offset, vertical offset, blur radius, spread, and color. Combined with border-radius, you can create polished card designs, buttons, and modal dialogs.

Understanding Box Shadow Properties

Every box-shadow layer is built from five core values that control how the shadow appears. The horizontal offset (X) and vertical offset (Y) determine the shadow's position relative to the element — positive values push it right and down, while negative values push it left and up. The blur radius controls how soft the shadow edges are: a value of 0 produces a hard-edged shadow, while larger values create a softer, more diffused effect. The spread radius adjusts the shadow's size independently of the element — positive values enlarge it, negative values shrink it. Finally, the color value, often defined with alpha transparency (e.g., rgba(0,0,0,0.2) or hex with opacity like #00000033), determines the shadow's tint and visibility. Mastering these five parameters lets you craft everything from subtle depth cues to dramatic visual effects.

Box Shadow vs Drop Shadow

A common point of confusion is the difference between CSS box-shadow and the CSS filter: drop-shadow() function. While they produce similar visual results, they behave fundamentally differently. box-shadow always follows the rectangular bounding box of the element — it respects the element's border box and border-radius, but it cannot see through transparent areas. In contrast, drop-shadow() operates on the element's alpha mask, meaning it shadows the actual visible content. This makes drop-shadow() the right choice for irregular shapes, PNG images with transparency, or elements where the shadow must follow clipped or pseudo-element-generated contours. For standard rectangular UI components like cards, buttons, and modals, box-shadow is more performant and offers greater control with features like inset shadows and multiple comma-separated layers.

Common Shadow Patterns

Three popular shadow patterns appear frequently in modern web design. Material Design elevation uses multiple shadow layers at different offsets and blurs to simulate physical depth — a small, tight shadow close to the element and a larger, softer shadow farther away. This creates the illusion that elements float above the surface at varying heights. Soft UI (Neumorphism) uses both an outer shadow and an inner (inset) shadow in complementary colors to create a soft, extruded plastic look. This style pairs especially well with pastel backgrounds and subtle border-radius treatments. Neon glow effects use a bright, saturated shadow color with a large blur radius and zero offset, often combined with multiple layers of increasing blur to create a radiant halo effect around buttons, input fields, or decorative elements. Experiment with the presets in this tool to see each pattern in action, then tweak the values to match your project's design language.

For more CSS design tools, check out the CSS Gradient Generator to create complementary background gradients that pair beautifully with your shadows.