✅ CSS代码已复制
首页 › 设计工具 › CSS阴影生成器

🎭 CSS 阴影生成器

可视化调整 Box-Shadow · 6个参数实时预览 · 5种预设 · 一键复制CSS

px
px
px
px
0.50 (0-1)

📋 预设样式

📝 CSS 代码 (生产就绪)

.element { box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.5); }

📖 在线CSS阴影生成器：从入门到精通

Box-Shadow 是CSS3中最常用的视觉效果属性，为网页元素添加深度和层次感。ng.cc推出的在线CSS阴影生成器提供可视化界面，通过调整水平偏移、垂直偏移、模糊半径、扩展半径、颜色、透明度6个参数，实时预览阴影效果。内置5种生产级预设，一键复制CSS代码，前端开发、UI设计必备工具。

🎯 6参数全控制

X/Y偏移、模糊、扩展、颜色、透明度。负值偏移可创建左上阴影，扩展负值实现内陷效果。

⚡ 滑块+数字双控

拖动滑块快速调整，或直接输入精确数值。实时联动，满足精准设计和快速原型双需求。

📦 5种生产预设

轻柔、卡片、深陷、霓虹、无阴影。覆盖卡片设计、按钮状态、霓虹灯效等高频场景。

🔍 实时CSS预览

任何参数调整都在右侧代码区同步更新，包含完整的box-shadow声明，可直接复制使用。

🎯 Box-Shadow 参数详解

参数 范围 说明 示例
水平偏移-50 ~ 50px正值向右，负值向左5px 右阴影
垂直偏移-50 ~ 50px正值向下，负值向上-5px 上阴影
模糊半径0 ~ 100px数值越大，边缘越模糊10px 柔和阴影
扩展半径-20 ~ 20px正值扩大阴影，负值收缩-2px 内陷效果
颜色HEX任意色彩#4EC9B0 品牌色
透明度0 ~ 10完全透明，1完全不透明0.3 半透明

💡 阴影设计技巧

🔹 卡片阴影层次感

使用两层阴影：box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 4px 20px rgba(0,0,0,0.05);。第一层提供紧贴感，第二层提供漂浮感。

🔹 霓虹发光效果

使用品牌色+高模糊+0偏移：box-shadow: 0 0 20px 5px #4EC9B0;。配合深色背景效果更佳。

🔹 内阴影(inset)

在参数前添加inset关键字，当前版本暂未支持，您可以在生成的CSS代码中手动添加。

❓ 常见问题解答

❓ Q1：Box-Shadow支持内阴影吗？
本工具专注于外阴影的可视化调整。内阴影需要添加inset关键字，您可以在生成的CSS代码中手动插入inset。例如：box-shadow: inset 0 4px 10px rgba(0,0,0,0.2);。我们计划在2.0版本增加inset切换开关。
❓ Q2：支持多重阴影叠加吗？
当前版本为单层阴影设计，多重阴影需要手动在CSS代码中添加逗号分隔的多组值。例如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);。您可以使用本工具生成第一层阴影，复制代码后手动添加第二层。
❓ Q3：如何实现只有单边阴影？
将模糊半径设为0，调整偏移值。例如：5px 0 0 0 #000 产生右侧5px的清晰边线。如需柔化单边阴影，需使用扩展负值或伪元素，本工具暂不支持。
❓ Q4：预设的阴影可以应用到生产环境吗？
完全可以。5种预设均来自业界最佳实践：
- 轻柔：适合悬浮卡片、按钮
- 卡片：Material Design经典卡片阴影
- 深陷：适用于模态框、下拉菜单
- 霓虹：科技感按钮、高亮元素
您可以直接复制使用，也可作为起点微调。
❓ Q5：支持跨浏览器兼容性吗？
box-shadow 是CSS3标准，所有现代浏览器（Chrome、Firefox、Safari、Edge）均完全支持，无需前缀。Internet Explorer 9+ 支持（IE9需加-ms-前缀）。本工具生成的标准语法适用于99%的生产环境。
❓ Q6：扩展半径负值有什么用？
负值扩展半径会使阴影向内收缩，可用于创建悬浮元素的「反阴影」效果，或配合0模糊实现描边效果。例如：0 0 0 -2px #000 会产生类似border但不影响布局的描边。

🔗 关联工具推荐

本工具是ng.cc开发者工具箱设计工具系列的一员，您可能还需要：

⚡ 所有阴影计算均在浏览器本地完成，无任何数据上传。