轻松创建美丽的 CSS 盒阴影
使用直观界面生成令人惊艳的盒阴影。复制 CSS 代码并立即在您的项目中使用。
Preview
Box Shadow
Customize me
CSS Output
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
Shadow Controls
Position
0px
4px
Size
6px
-1px
Color
10%
Options
Presets
柔和阴影
中等阴影
沉重阴影
内阴影
尖锐对角线
轮廓光晕
双重阴影
提升效果
如何使用
基本控制
- 调整水平偏移可向左或向右移动阴影
- 调整垂直偏移可向上或向下移动阴影
- 增大模糊半径可使阴影更柔和
- Use 展开半径用于增大或减小阴影的整体大小
- 更改Color and Opacity用于自定义阴影外观
高级功能
- Enable 内嵌阴影用于创建内阴影效果
- Use 多重阴影用于创建更复杂的效果
- 保存和加载Presets用于快速访问您最喜欢的阴影
- Click 随机阴影灵感来源
- 复制生成的 CSS 代码并粘贴到您的项目中