Create beautiful CSS box shadows with a live visual editor. Adjust offset, blur, spread, and color — copy ready-to-use CSS instantly. 100% free and client-side.
Adjust the controls to see the shadow effect in real-time
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);The CSS Box Shadow Generator is a visual tool for creating beautiful drop shadows around HTML elements. Unlike static shadow libraries, this tool lets you fine-tune every parameter — horizontal offset, vertical offset, blur radius, spread radius, and color — in real time. It generates standard CSS box-shadow syntax compatible with all modern browsers. Whether you need a subtle material design shadow or a dramatic glow effect, this tool has you covered. All processing happens in your browser — no data is sent anywhere.
A CSS box shadow is a visual effect that adds a shadow around the frame of an HTML element. It is defined by the box-shadow property and consists of horizontal offset, vertical offset, blur radius, spread radius, and color. Shadows can be used to create depth, elevation, and visual hierarchy in web designs.
The spread radius (also called expansion) controls the size of the shadow. A positive value expands the shadow, making it larger than the element itself. A negative value shrinks the shadow. It is the key parameter for creating hard, well-defined shadows versus soft, diffused ones.
An inset shadow appears inside the element's border, creating the illusion of depth or an inner bevel. It is commonly used for pressed-button effects, card embossing, and inner glows. Toggle the "Inset Shadow" option to switch between outer and inner shadows.
Yes. The generated box-shadow syntax follows the CSS standard and works in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes are needed for current browser versions.
An inset shadow appears inside the element rather than outside. It creates a recessed or pressed effect, commonly used for buttons that look pushed in or for creating inner depth on containers.
To create a glow effect, set both Horizontal and Vertical Offset to 0, use a larger Blur Radius (15-30px), choose a bright color, and increase the opacity. You can also add a positive Spread Radius to intensify the glow.
While CSS box-shadow is well-supported, subtle rendering differences can occur between browsers due to how each engine handles anti-aliasing and color blending. The differences are usually minor and the shadow will look great across all modern browsers.
Absolutely! The CSS code generated by this tool is standard CSS that you can use in any project — personal, commercial, or open source. There are no restrictions on how you use the generated code.