UD5工具箱
渐变（Gradient）
渐变是指颜色之间平滑过渡的视觉效果，在CSS中通过linear-gradient或radial-gradient函数实现。本编辑器支持创建和编辑各种渐变效果，用户可以通过可视化界面调整渐变参数，无需手动编写代码。渐变广泛应用于网页背景、按钮、横幅等UI元素的设计中。
线性渐变（Linear Gradient）
线性渐变是颜色沿直线方向平滑过渡的效果，通过linear-gradient()函数定义。在本编辑器中，用户可以设置渐变角度（0-360度）来控制颜色过渡方向。线性渐变常用于创建背景、按钮悬停效果和分隔线设计，是网页设计中最常用的渐变类型之一。
径向渐变（Radial Gradient）
径向渐变是从中心点向外扩展的颜色过渡效果，通过radial-gradient()函数定义。在本编辑器中，用户可以选择椭圆或圆形形状，并设置渐变中心的位置。径向渐变适合创建聚光灯效果、球形立体感或圆形光晕，为设计增添深度和层次。
色标（Color Stop）
色标是渐变中的颜色节点，定义了渐变在特定位置的颜色值。每个色标包含颜色值和位置信息，位置通常以百分比表示。在本编辑器中，用户可以通过拖拽调整色标位置，通过颜色选择器修改颜色值。色标的数量和位置决定了渐变的复杂度和视觉效果。
渐变角度（Gradient Angle）
渐变角度是线性渐变中颜色过渡的方向参数，以度数为单位，范围为0到360度。0度表示从下到上，90度表示从左到右，180度表示从上到下，270度表示从右到左。在本编辑器中，用户可以通过输入框或可视化控件精确设置渐变角度，控制颜色过渡的方向。
渐变形状（Gradient Shape）
渐变形状是径向渐变的形态参数，包括椭圆（Ellipse）和圆形（Circle）两种选项。椭圆形状适合创建椭圆形的颜色过渡，常用于模拟光照效果；圆形形状则创建完美的圆形渐变，适合创建光晕或聚焦效果。在本编辑器中，用户可以根据设计需求选择合适的渐变形状。
渐变位置（Gradient Position）
渐变位置是径向渐变的中心点坐标参数，定义了渐变从哪个位置开始扩展。CSS提供了九个预设位置：左上（top left）、上中（top）、右上（top right）、左中（left）、中心（center）、右中（right）、左下（bottom left）、下中（bottom）、右下（bottom right）。在本编辑器中，用户可以通过点击预设位置或输入坐标值来设置渐变中心。
反转渐变（Reverse Gradient）
反转渐变是指将当前渐变的颜色顺序或方向进行反转的操作。在线性渐变中，反转会改变颜色过渡的方向；在径向渐变中，反转会将中心和边缘的颜色互换。在本编辑器中，用户可以通过一键操作快速反转渐变，创建镜像效果或测试不同的视觉方向。
均匀分布（Uniform Distribution）
均匀分布是指自动将所有色标在渐变条上等间距排列的功能。当用户添加了多个色标后，手动调整每个色标的位置可能比较繁琐，均匀分布功能可以一键将色标均匀分布，确保颜色过渡自然流畅。在本编辑器中，点击均匀分布按钮即可自动完成色标位置的优化调整。
CSS代码输出
CSS代码输出是本编辑器的核心功能之一，它会根据用户设置的渐变参数自动生成标准的CSS代码。生成的代码包含完整的渐变函数调用和所有参数设置，可直接复制到项目样式表中使用。代码输出会随着参数的调整实时更新，确保用户始终获得最新的CSS代码。