CSS Box Shadow Generator

Box shadows are one of those CSS properties that look deceptively simple until you are actually trying to craft one that looks deliberate rather than default. The property takes up to six values, each doing something different, and the relationship between blur radius, spread radius, and offset determines whether the result looks like a well-considered design decision or a drop shadow from a 2008 PowerPoint template.

Writing box shadow values from memory and refreshing the browser to check the result is a reliable way to waste thirty minutes on something that should take three. This tool gives you the live preview that the development workflow does not.

How CSS Box Shadow Works

The box-shadow property adds one or more shadow effects around an element's frame. The full syntax for a single shadow layer is:

box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color] [inset];

Each value does a specific job. The horizontal offset moves the shadow left or right. A positive value moves it right, a negative value moves it left. The vertical offset moves it up or down in the same way. These two values together determine where the shadow appears to be cast from.

The blur radius controls how soft or sharp the shadow edge is. A value of zero produces a hard shadow with no blur. Higher values create progressively softer, more diffuse shadows. This is the parameter that most distinguishes a realistic depth effect from a flat graphic one.

The spread radius is less commonly understood but equally important. A positive spread value expands the shadow outward beyond the element's dimensions. A negative value shrinks it inward. Spread combined with zero offset and zero blur produces a clean solid border effect without using the border property.

The color value accepts any valid CSS color format including hex, RGB, RGBA, HSL, and named colors. Using RGBA to control the shadow's opacity is standard practice since a solid opaque shadow looks painted on rather than cast. Most production shadow values use an RGBA black with opacity somewhere between 0.08 and 0.25 depending on how prominent the effect should be.

The optional inset keyword flips the shadow from outside the element to inside it, creating a pressed or recessed effect rather than an elevated one.

Multiple Shadow Layers

The box-shadow property accepts multiple comma-separated shadow definitions, which is where the real depth of the property becomes apparent. Layering two or three shadows with different parameters produces results that a single shadow layer cannot replicate.

A common technique for realistic elevation shadows uses two layers: a larger, softer shadow for ambient light and a smaller, sharper shadow for direct light. Material Design's elevation system is built on exactly this principle. A card at elevation 2 might use something like:

box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 1px 2px rgba(0,0,0,0.24);

The first layer provides the broad ambient shadow. The second adds the sharper contact shadow close to the element. Together they read as a coherent depth effect rather than a flat layer of grey.

Layering inset and outset shadows on the same element creates neumorphic effects, the extruded or embossed appearance that had a significant moment in UI design a few years ago and is now used more selectively. Combining an outset shadow on one side with an inset shadow on the opposite side creates the visual impression of a surface catching light from a specific direction.

What the Tool Provides

The generator lets you configure each shadow parameter through visual controls and see the result update in real time. You can add multiple shadow layers to the same element and adjust each one independently. The live preview shows you the actual rendered effect rather than requiring you to imagine what the values will look like.

Preset effects cover standard shadow patterns for common use cases: subtle card elevation, floating button, deep drop shadow, inset pressed state, and similar. These are useful starting points when you know the general effect you want but do not want to arrive at the exact values through pure manual adjustment.

Here is how to use it:

1. Use the controls to set the horizontal offset, vertical offset, blur radius, spread radius, and color for your first shadow layer.
2. Toggle the inset option if you want an inner shadow rather than an outer one.
3. Add additional shadow layers if the effect requires depth from multiple light sources.
4. Browse the presets if you want a starting point rather than building from zero.
5. Copy the generated CSS to your clipboard with one click, or download it as a file.

The output is production-ready CSS compatible with all modern browsers without vendor prefixes.

Practical Applications by Context

Cards and surfaces. The most common use case for box shadows in UI design. A subtle shadow lifts a card element off the background, establishing hierarchy and separation without using borders or background color contrast alone. The shadow parameters here are usually conservative: small offsets, moderate blur, low-opacity color. Aggressive shadows on cards feel dated.

Buttons and interactive elements. Shadows on buttons serve both aesthetic and functional purposes. A slightly elevated default state with a reduced shadow on hover or active state communicates depth and interactivity. Removing the shadow entirely on click, combined with an inset shadow, creates a physically convincing pressed effect that costs nothing in assets.

Focused input states. A soft outer glow on a focused form input is a standard accessibility and UX pattern. This is typically achieved with a spread shadow in the site's accent color at low opacity rather than a directional shadow. The spread radius does the work here, expanding the shadow outward uniformly around the element.

Decorative and depth effects. Larger, more dramatic shadows work well for modals, drawers, and overlay elements where communicating significant elevation above the base layer is the goal. These warrant more visible offset and blur values than card-level shadows.

Box Shadow in a Front-End Workflow

Box shadows, rounded corners, and gradient backgrounds tend to be configured alongside each other when building UI components. The CSS Border Radius Generator handles corner rounding with the same live preview approach, and the PNG Gradient Background Generator covers gradient backgrounds for cases where a CSS gradient is not flexible enough for what you need.

Once you have the visual styles configured, testing how they actually look in context is worth doing before they go into a stylesheet. The Live Content Previewer lets you drop your generated CSS and a quick HTML snippet into a live environment to see the combination rendered properly. And when the stylesheet is ready for production, the CSS Minifier compresses the output without affecting functionality.

Browser Compatibility and Performance Notes

The box-shadow property is supported in every major browser without vendor prefixes. There is nothing to polyfill for any browser in active use.

Performance is worth a brief mention. Box shadows are composited by the browser and can affect rendering performance on elements that animate or scroll, particularly on lower-powered devices. For animated elements, keeping shadows simple, using transform and opacity for the animation itself, and testing on mobile hardware will surface most performance issues before they reach users. For static elements, box shadows have no meaningful performance cost in any realistic use.

One specific behavior to know: box shadows do not affect layout. They are rendered outside the element's box model and do not push other elements around the way a border or outline would. If you need the shadow to influence surrounding layout, that requires a different approach.

Frequently Asked Questions

What is the difference between box-shadow and drop-shadow?

box-shadow applies to the element's rectangular box, following its border-radius but not the shape of its content or transparency. The drop-shadow() filter function applies to the rendered content including transparency, so it follows the actual visible shape of an element with a transparent background, such as a PNG image. For most layout elements, box-shadow is the correct choice.

Can I animate CSS box shadows?

Yes, box-shadow is animatable using CSS transitions and animations. Animating between two shadow states works reliably. For performance, animating opacity on a pseudo-element shadow is often recommended for complex multi-layer shadows on frequently animating elements, since it offloads the rendering work more efficiently.

How do I create a glow effect with box-shadow?

Use a shadow with zero offset, zero or low blur radius, a positive spread radius, and a color matching your intended glow. Using RGBA or HSL with full saturation produces the most convincing glow. Multiple layers in the same hue at different spread and opacity values add depth to the effect.

Does box-shadow work on all HTML elements?

Box-shadow works on any element that generates a box, which includes most block and inline-block elements. It does not apply to inline elements unless they are given a display value that generates a box.