Box Shadow Generator
Generate CSS box-shadow code with visual preview for drop shadows, inset, and layered effects. Enter values for instant results with step-by-step formulas.
Formula
box-shadow: [inset] h-offset v-offset blur spread color
The box-shadow property accepts an optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius, and color. Positive horizontal values move the shadow right, positive vertical values move it down. Blur softens edges and spread expands or contracts the shadow.
Worked Examples
Example 1: Material Design Card Shadow
Problem: Create a subtle shadow for a card component that looks elevated, similar to Material Design elevation level 2.
Solution: Use no horizontal offset, 4px vertical offset, 12px blur, and 0 spread with 15% opacity black.\nbox-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);\nThe zero horizontal offset keeps the shadow centered.\nThe 4px vertical offset simulates a top-down light source.\n12px blur creates a soft, natural gradient at the edges.
Result: CSS: box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15); — clean elevated card shadow.
Example 2: Floating Button Shadow
Problem: Create a prominent shadow for a floating action button that appears to hover above the page with significant depth.
Solution: Use 0px horizontal, 10px vertical, 25px blur, and -5px spread with 20% opacity.\nbox-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.20);\nThe -5px spread prevents the shadow from extending beyond the button width.\nThe 25px blur creates a very soft, diffused shadow.\n10px vertical offset implies the button is significantly elevated.
Result: CSS: box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.20); — dramatic floating shadow.
Frequently Asked Questions
How do blur and spread values affect the shadow appearance?
Blur and spread work together to define the shadow shape and softness. The blur radius creates a Gaussian blur effect, where a value of zero produces a sharp-edged shadow identical to the element shape. Larger blur values make the shadow progressively softer and more diffused. The spread radius expands (positive values) or contracts (negative values) the shadow before the blur is applied. A positive spread makes the shadow larger than the element, useful for creating glow effects. A negative spread makes the shadow smaller, which when combined with a vertical offset and large blur, creates realistic elevated shadows. Understanding these two properties independently gives you precise control over shadow aesthetics.
What is the difference between drop-shadow and box-shadow?
Box-shadow and the drop-shadow filter produce similar visual effects but work fundamentally differently. Box-shadow applies a shadow to the rectangular box model of an element, meaning it always creates a rectangular shadow regardless of the element content shape. The drop-shadow CSS filter, on the other hand, respects the alpha channel of the element, creating shadows that follow the actual shape of transparent images or text. Box-shadow also supports the spread radius and inset keyword, which drop-shadow does not. Performance-wise, box-shadow is generally faster because it does not require compositing. For rectangular elements, box-shadow is preferred, while drop-shadow is essential for non-rectangular shapes like PNG images with transparency.
How does the inset keyword change box-shadow behavior?
The inset keyword fundamentally changes where the shadow is rendered, placing it inside the element rather than outside. An inset shadow creates the visual impression that the element is pressed into or carved out of the page surface. The offset values still work the same way, but their visual effect is reversed: a positive vertical offset creates a shadow at the top of the element interior, making it appear lit from below. Inset shadows are commonly used for input fields to create a recessed appearance, toggle switches to show pressed states, and neumorphic design patterns. You can combine inset and regular shadows on the same element by listing them comma-separated, creating complex depth effects.
What shadow values create the most realistic depth effects?
Realistic depth effects mimic how light and shadow behave in the physical world. For a subtle elevation like a card, use small offsets (0-2px vertical), moderate blur (6-12px), and low opacity (10-15%). For medium elevation like dropdowns, increase the offset (4-8px vertical), blur (16-24px), and keep opacity moderate (15-20%). For high elevation like modals, use larger offsets (12-24px vertical), extensive blur (32-48px), and combine with a slight negative spread to prevent the shadow from appearing too large. Google Material Design popularized this approach with defined elevation levels. The key insight is that as elevation increases, shadows become larger, softer, and slightly less opaque, matching how ambient occlusion works in real lighting scenarios.
Can I animate box-shadow with CSS transitions?
Yes, box-shadow is animatable with CSS transitions and keyframe animations, but there are important performance considerations. Adding transition: box-shadow 0.3s ease allows smooth shadow changes on hover or state changes. However, animating box-shadow can be expensive because it triggers repaints on every frame. A performant alternative is to create a pseudo-element with the target shadow, position it behind the element, and animate its opacity instead. This way the browser only needs to composite the opacity change rather than recalculating the shadow geometry each frame. For simple hover effects on a small number of elements, direct box-shadow animation is fine. For complex animations or many elements, the pseudo-element technique is strongly recommended.
How do I convert box-shadow values between design tools and CSS?
Design tools like Figma, Sketch, and Adobe XD use slightly different shadow models than CSS. Figma exports shadows with X offset, Y offset, blur, and spread that map directly to CSS box-shadow values. However, Figma uses a different blur algorithm, so a 10px blur in Figma may look slightly different in the browser. Sketch shadows also map closely but may require opacity adjustment. Adobe XD uses distance and angle instead of X/Y offsets, requiring trigonometric conversion: X = distance times cosine of angle, Y = distance times sine of angle. When copying shadows from design tools, always verify the result in a browser. Color values may also differ between tools, especially regarding alpha channel handling and color space interpretation.