CSS Box Shadow Generator
Visually create CSS box-shadow effects with real-time preview. Adjust offset, blur, spread, color, and opacity, then copy the generated CSS code.
How the CSS Box Shadow Generator Works
This tool lets you visually design CSS box-shadow effects by adjusting six parameters: horizontal offset, vertical offset, blur radius, spread radius, shadow color, and the inset flag. As you modify each value, the tool builds the corresponding CSS box-shadow declaration and renders a live preview showing exactly how the shadow will appear on an HTML element. You can stack up to three shadow layers for more complex, realistic depth effects.
CSS Box Shadow Syntax
Syntax: box-shadow: [inset] offset-x offset-y blur spread color;
Example: box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);
The inset keyword is optional and creates an inner shadow instead of an outer drop shadow. All length values are in pixels. Multiple shadows are comma-separated.
Understanding Box Shadow Parameters
The box-shadow CSS property adds shadow effects around an element's frame. It is one of the most commonly used CSS properties for creating depth, elevation, and visual hierarchy in modern web design. Understanding each parameter gives you precise control over the shadow appearance.
The horizontal offset moves the shadow left or right. Positive values push the shadow to the right, negative values push it to the left. The vertical offset moves the shadow up or down, with positive values pushing it downward. Together, these offsets control the apparent direction of the light source casting the shadow.
The blur radius controls how soft or sharp the shadow appears. A value of zero produces a hard, crisp shadow. Higher values create increasingly soft, diffused shadows using a Gaussian distribution. Most modern UI shadows use blur values between 4px and 24px for subtle, realistic effects.
The spread radius expands or contracts the shadow before the blur is applied. Positive spread makes the shadow larger than the element on all sides, while negative spread shrinks it. Spread is useful for creating shadows that extend evenly around all sides of an element, or for creating tight glows and outlines.
Shadow Color and Transparency
For realistic shadows, use a dark color with partial transparency such as rgba(0,0,0,0.2). Colored shadows using brand colors with transparency can create modern, vibrant elevation effects popular in contemporary UI design. The rgba format lets you control the alpha channel independently, making it easy to fine-tune shadow intensity.
Multiple Shadow Layers
CSS supports multiple box shadows on a single element by separating each shadow with a comma. Layered shadows create more realistic depth. A common technique uses a tight, subtle shadow for immediate elevation and a wider, softer shadow for ambient depth. This tool lets you stack up to three layers and see the combined effect in real time.
Inset Shadows
The inset keyword transforms the shadow from an outer drop shadow to an inner shadow that appears inside the element's border. Inset shadows are commonly used for pressed button states, input field styling, and creating recessed visual effects. Combining both inset and outer shadows on the same element creates sophisticated three-dimensional effects.
Privacy and Security
All shadow generation and preview rendering happens entirely in your browser using CSS and JavaScript. No data is sent to any server. The tool simply constructs a CSS declaration string and applies it to a preview element in real time.