CSS Box Shadow (drop shadow) code creation generator | ZeroTools

The CSS box-shadow property draws an outer or inner shadow around an element's box. In this builder, you specify horizontal offset, vertical offset, blur radius, spread radius, color, and opacity for each layer, adding inset if necessary.

The generated order is inset, X, Y, blur, spread, rgba().

X ranges from -100 to 100px; positive values shift the shadow right, negative left. Y also ranges from -100 to 100px; positive is down, negative is up.

Blur ranges from 0 to 150px; 0 creates a sharp shadow, while larger values blur the edges. Spread ranges from -50 to 100px; positive expands the shadow's base area, negative shrinks it.

Turning on inset changes the syntax to draw the shadow inside the element. Since this looks different from an outer shadow, verify the results in the preview even with the same offset and blur.

This tool directly utilizes the browser's box-shadow rendering and does not implement custom light source calculations or Gaussian blur processing.

For example, one of the initial layers reads as box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.10). The first 0px is X, 10px is Y, 25px is blur, -5px is spread, and the last is color and opacity.

The inset keyword is added to the beginning of this numeric sequence only when turned on. Checking the role of values in this order makes it easier to spot where to modify when manually adjusting after copying.

In shadow layer management, you can add, select, delete, and turn new shadows ON/OFF. A new layer is added as an outer shadow with X 0px, Y 4px, blur 10px, spread 0px, black, and 15% opacity.

You cannot delete all layers; a minimum of one layer remains. However, you can turn all remaining layers OFF, and the output value in that case is none.

The tool filters shadows solely based on whether they are enabled.

Layers that are ON are concatenated with commas and line breaks in their on-screen array order. In CSS, you can specify multiple box-shadow values separated by commas, and the shadow written first is drawn in front of the later ones.

Since this tool lacks a drag-and-drop sorting feature, you cannot freely change the order after adding them. If necessary, edit the writing order of each value after copying.

You can combine different directions, blurs, spreads, colors, and insets for each layer, but this tool does not automatically calculate shadows from the Z-axis or elevation values.

Increasing the number of layers does not always guarantee a natural look, so it is easier to adjust by toggling them ON/OFF one by one to see how each shadow affects the overall appearance.

Input the shadow color in #RRGGBB format, such as #000000 or #3b82f6. You can select it with the color picker or enter a 6-digit HEX into the text field.

Direct input of shorthand #RGB, rgb(), rgba(), hsl(), or hsla() is not supported. This tool does not validate for a valid 6-digit HEX; short or invalid characters may result in an incorrect color, and for an 8-digit HEX, only the leading RGB may be used while the alpha is ignored.

Raw color values are entered without errors, and it does not prevent CSS copying, so please use a 6-digit HEX and verify manually.

During conversion, the HEX is split into red, green, and blue by two digits each, and converted from hexadecimal to decimal values between 0 and 255.

The opacity slider ranges from 0 to 100%, held internally as a value from 0 to 1. The output alpha is a string up to two decimal places.

For example, selecting black with 25% opacity results in rgba(0, 0, 0, 0.25).

Separate from the shadow color, the preview box color is also specified in #RRGGBB format. This is also a raw input without validation or copy prevention.

Since the box color is not included in the shadow's CSS, the generated code contains only box-shadow. There are no functions to numerically evaluate the synthesis result with the background color, perceived color difference, contrast, or appearance on an image background.

"Soft (standard)" is a single outer layer with X 0px, Y 25px, blur 50px, spread -12px, black, and 25% opacity. This is a starting example combining a wide blur and negative spread; pressing the button replaces the current layer list with this single item.

The on-screen preset "Hard (offset layers)" consists of two layers. The first is X/Y 6px, blur/spread 0px, #1e293b, 100% opacity; the second is X/Y 12px, blur/spread 0px, #64748b, 50% opacity.

Both are outer shadows with no contour blur. The name is just a label for exploring appearances and does not automatically complete a specific design methodology.

"Inner (inward)" is a single inset layer with X/Y 2px, blur 5px, spread 0px, black, and 30% opacity. "Neon luminescence (Glow)" features two blue outer layers with 0px offset: the first has blur 15px, spread 5px, #3b82f6, 60%; the second has blur 30px, spread 10px, #60a5fa, 30%.

These simply load fixed values, so adjust each slider to match your target design after applying them.

You can change the color, rounded corners, and size of the target preview box. Rounded corners range from 0 to 100px, and the square box size is 100 to 250px.

The background can be chosen from a checkered pattern, white, or black, allowing you to compare how transparent shadows look on backgrounds with different brightness.

The checkered pattern is a CSS background for confirmation and does not actually composite the transparent parts of the target application.

The boxShadow created from the ON and enabled color layers is applied to the on-screen box as an inline style. Since the box shape, surrounding margins, background, and other elements will differ on an actual website, do not finalize the result based solely on the preview; please verify it in the destination environment.

The copied output consists of three declarations with the same values: box-shadow, -webkit-box-shadow, and -moz-box-shadow.

While it includes prefixed declarations, it does not guarantee compatibility with all browsers or older environments. If your policy is to use only standard declarations, you can delete the unnecessary lines after copying.

Note that the copy operation does not await completion, and the success display alone does not guarantee that copying was actually successful.

This tool creates box-shadow. It does not generate text-shadow for text outlines, state comparisons for hover or active, transition, keyframe animations, or alternative code using pseudo-elements.

Direct input of RGBA or HSLA strings, gradient colors, light source angles, Z-axis, or automatic suggestions from elevation are also unsupported.

There is no feature to judge or guarantee designs like neomorphism or glassmorphism. Presets are fixed values to start adjusting and do not build a complete set including the target page's background color, borders, or transparency.

Add any necessary styles on the project side after outputting.

A large number of layers or large blur and spread values may affect rendering load depending on the number of displayed elements and the device.

This tool does not measure or optimize GPU usage, frame rate, or smoothness during scrolling. Please check on the target device, especially when applying the same shadow to multiple elements on an actual page.

Shadow configuration and code generation are done by JavaScript in this component, but this does not mean network communication is entirely absent during page loads, nor does it guarantee absolute offline safety.