UD5工具箱
多层阴影独立控制
工具支持同时管理多个box-shadow层，每一层都提供独立的参数调节面板。用户可以通过「添加层」按钮创建新的阴影层，每层可单独设置水平偏移量、垂直偏移量、模糊半径、扩展半径和颜色值。各层参数互不影响，完全独立控制。层卡片支持点击展开或折叠，方便在层数较多时进行管理。每层都设有上移和下移按钮，用于调整阴影层的堆叠顺序——在CSS中，box-shadow列表中靠前的阴影层会渲染在最外层，这一顺序直接影响最终的视觉叠加效果。
全局光源方向
工具提供光源方向的全局控制，用户可以通过拖动光源角度控件或使用快捷方向按钮（上、下、左、右及对角线方向）来设定统一的光源角度。当光源方向改变时，所有阴影层的偏移值会自动按比例重新计算，确保整个阴影系统来自同一光源方向。这一功能在实际设计中至关重要——页面中所有元素的阴影必须保持一致的光源方向，否则会破坏空间感的真实性。光源角度以度数显示，常用的315度对应右下方光源，是最常用的自然光照方向。
深度缩放
深度缩放功能允许用户通过一个滑块统一缩放所有阴影层的偏移和模糊值。当缩放因子从1.0x调整到更高或更低的值时，所有层的offsetX、offsetY和blurRadius会按比例变化，而颜色和spreadRadius保持不变。这使得用户可以在保持阴影层次比例关系的前提下，快速调整整体的立体深度感。例如，在从桌面端切换到移动端设计时，可以通过降低深度缩放因子来减小阴影的视觉冲击力，使其更适合小屏幕的观看距离。
多形状实时预览
工具提供四种预览形状供用户选择：圆角方块（默认）、圆形、胶囊形和直角方块。切换预览形状后，阴影效果会立即在画布上重新渲染，帮助用户观察同一套阴影参数在不同几何形状上的表现差异。例如，圆形元素上的阴影更容易表现出柔和的弥散效果，而直角方块则更适合展示锐利的纸雕层次感。预览画布支持光源方向的可视化指示，用户可以直观地看到光线从哪个方向照射过来。
效果预设方案
工具内置了六种常用的效果预设方案，覆盖了多层阴影最典型的应用场景。「柔和纸雕」模拟多层纸张堆叠的柔和阴影；「锐利纸雕」使用更小的模糊半径和更强的颜色对比；「悬浮卡片」通过集中的短距离阴影营造悬浮感；「3D按钮」利用内外阴影的组合创造凸起的三维按钮效果；「弥散光晕」使用大模糊半径和正值扩展半径制造发光效果；「霓虹效果」则通过鲜艳的颜色和多层叠加实现类似霓虹灯管的视觉效果。点击任意预设即可一键加载其全部参数配置。
CSS代码生成与复制
工具会根据用户当前配置的所有阴影层参数，实时生成标准的CSS box-shadow声明代码。生成的代码完全符合CSS规范，各层之间使用逗号分隔，每层包含offsetX、offsetY、blurRadius、spreadRadius和color五个参数。代码区域下方设有复制按钮，点击后可将完整的CSS代码复制到系统剪贴板，用户可以直接粘贴到样式表、内联style属性或CSS-in-JS配置中使用。生成的代码格式化良好，方便阅读和二次编辑。
颜色透明度精确控制
每层阴影的颜色支持RGBA格式，用户可以通过颜色选择器选取基础色相，并通过透明度滑块精细调节阴影的浓淡程度。在多层阴影的实际应用中，颜色透明度的精确控制是决定效果自然程度的关键因素——最内层（靠近元素）的阴影通常使用较高的不透明度以表现近距离的遮挡，而外层阴影则使用较低的不透明度模拟远处的散射光。工具的颜色面板支持直观的拖拽调节，用户可以实时观察透明度变化对整体效果的影响。