What is a CSS box shadow?

CSS box-shadow is a property that adds shadow effects around an element's frame. You can specify horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be layered for complex effects.

How do I create an inset shadow?

Add the 'inset' keyword to the box-shadow property. Inset shadows appear inside the element's border, creating a pressed or recessed effect. Toggle the Inset option in the generator to see the difference.

Can I have multiple box shadows?

Yes! CSS allows multiple box shadows separated by commas. This enables complex effects like combining an outer shadow with an inset highlight. Use the 'Add Shadow' button in our generator to layer multiple shadows.

Does box-shadow affect layout?

No, box-shadow doesn't affect layout or element size. It's rendered outside the element without affecting surrounding elements. Use the spread value to control how far the shadow extends.

How do I make a CSS glow effect?

A glow effect uses a colored shadow with 0 offset and high blur. For example: box-shadow: 0 0 20px rgba(99, 102, 241, 0.6). Try the 'Glow' preset in the generator for an instant example.

CSS盒子阴影生成器

通过实时预览可视化生成CSS盒子阴影。自定义偏移、模糊、扩展、颜色和多层效果。

预览

CSS输出

box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.18);

水平偏移0px

垂直偏移4px

模糊半径16px

扩展半径-2px

颜色

不透明度18%

内嵌

预设

使用方法

通过实时预览可视化生成CSS盒子阴影。自定义偏移、模糊、扩展、颜色和多层效果。

1Adjust the sliders to set horizontal offset, vertical offset, blur, and spread.
2Pick a shadow color and set the opacity for transparency.
3Toggle 'Inset' to switch between outer and inner shadows.
4Click 'Add Shadow' to layer multiple shadows for complex effects.
5Copy the generated CSS and paste it into your stylesheet.

主要功能

Real-time preview of box shadow effects
Multiple shadow layers for complex designs
Inset shadow support for pressed effects
8 professional presets to get started quickly

CSS盒子阴影生成器

使用方法

主要功能

常见问题