CSS 阴影生成器

What Is the CSS Box Shadow Generator?

The CSS box shadow generator is a free visual editor for crafting box-shadow effects without writing CSS by hand. Adjust the horizontal and vertical offset, blur radius, spread, color, and opacity in real time — the live preview updates instantly so you see exactly what the shadow will look like on your page.

You can stack multiple shadow layers to create sophisticated effects like neumorphism, colored glows, and material-design-style elevation. The tool outputs the complete box-shadow CSS value ready to paste into your stylesheet.

How to Use the CSS Box Shadow Generator

1. Use the sliders to adjust offset X, offset Y, blur radius, spread radius, and opacity.
2. Click the color swatch to choose the shadow color.
3. Check Inset to make the shadow appear inside the element.
4. Click + Add Layer to stack multiple shadows.
5. Switch between layers using the numbered tabs at the top of the control panel.
6. Use the Presets on the right as a starting point.
7. Click Copy to copy the CSS value.

Features

• Live preview updates in real time as you adjust controls
• Full control over offset X, offset Y, blur, spread, color, and opacity
• Support for inset shadows
• Multi-layer shadows — stack as many as you need
• Customizable preview background and box colors
• 6 built-in presets: Soft, Hard, Layered, Inset, Glow Blue, Neumorphic
• One-click copy to clipboard

FAQ

What is CSS box-shadow?

The CSS box-shadow property adds one or more shadow effects to an element. Each shadow is defined by horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Multiple shadows can be layered by separating them with commas.

What does the spread radius do?

The spread radius expands or contracts the shadow. A positive value makes the shadow larger than the element; a negative value shrinks it. A spread of 0 keeps the shadow the same size as the element (before blur is applied).

What is an inset shadow?

An inset shadow is drawn inside the element rather than outside. It is useful for creating pressed-button effects, inner glows, and recessed UI elements.

Can I stack multiple box-shadows?

Yes. Click "+ Add Layer" to add more shadow layers. Each layer is listed separately and all are combined into a single box-shadow CSS value using comma separation. The first layer in the list is rendered on top.