What is CSS Box Shadow?
The CSS box-shadow property adds one or more shadow effects around an element's frame. Introduced in CSS3, it has become one of the most widely used properties for adding depth and visual hierarchy to web interfaces. A box shadow is defined by its horizontal offset (x), vertical offset (y), blur radius, spread radius, color, and an optional inset keyword. By combining multiple shadow layers, designers can create realistic depth effects, soft glows, sharp outlines, and neumorphic designs. The property is supported by all modern browsers and is a fundamental tool in every frontend developer's toolkit.
How to Use This Tool
Start by selecting a preset or adjusting the shadow parameters manually. Use the sliders and inputs to control the X offset, Y offset, blur radius, spread radius, color, and opacity for each shadow layer. You can add up to 6 layers to create complex shadow effects. Toggle the inset checkbox to create inner shadows. Adjust the preview background color, box color, and border radius to match your design context. The generated CSS code updates in real time and can be copied with one click. Try the "Layered" preset for a realistic multi-shadow depth effect that works well on dark backgrounds.
Common Use Cases
- Creating elevated card components with subtle depth for dashboard and landing page layouts
- Adding colored glow effects to buttons, badges, and interactive elements on hover states
- Building neumorphic UI designs using a combination of light and dark inset shadows
- Designing layered shadow systems for design tokens in component libraries and design systems
Why Use a Client-Side Tool?
This box shadow generator runs entirely in your browser with zero server communication. Every adjustment you make updates the preview and CSS output instantly without any network requests. This means no latency, no usage limits, and no risk of your design tokens or styling decisions being logged externally. You can experiment freely with different shadow combinations, and the tool works offline once loaded. It is ideal for rapid prototyping during development sessions.
Frequently Asked Questions
What is the difference between blur and spread in box-shadow?
Blur radius controls how soft or diffused the shadow appears. A higher blur value creates a more gradual, feathered edge. Spread radius controls the size of the shadow. A positive spread makes the shadow larger than the element, while a negative spread makes it smaller. Combining both allows you to create a wide range of effects from tight, focused shadows to soft, ambient glows.
How do I create a layered shadow for realistic depth?
Click "Add Layer" to add multiple shadow layers. The key to realistic depth is using 2 to 3 layers with different blur and offset values. Start with a tight shadow (small blur, close offset) for the near-surface effect, then add a larger, more diffused shadow for ambient depth. The "Layered" preset demonstrates this technique with three carefully tuned shadow layers.
What does the inset keyword do in box-shadow?
The inset keyword moves the shadow from the outside of the element to the inside. This creates an inner shadow effect that makes the element appear pressed or recessed into the page. Inset shadows are commonly used for input fields, wells, and neumorphic design patterns where elements need to look embedded rather than elevated.