CSS 渐变生成器 - 小禾笔记
简介
CSS 渐变生成器是一个在线可视化工具，帮助用户快速生成线性渐变和径向渐变的 CSS 代码。通过直观的图形界面调整方向、颜色和位置，即可实时预览并复制对应的 CSS 样式代码，无需手动编写复杂的渐变语法。
主要功能
- 渐变类型选择：支持线性渐变和径向渐变两种模式。
- 方向控制：提供 8 个方向按钮（↖、↑、↗、←、→、↘、↓、↙）以及一个角度输入框（如 90°），可精确控制线性渐变的方向。
- 颜色控制点：通过滑块和百分比输入，调整每个颜色节点的位置（%），实现多色渐变。
- 预设颜色：内置常用颜色组合，一键应用。
- 实时预览：调整参数后，预览区域立即显示渐变效果。
- CSS 代码生成：自动生成包含标准语法、WebKit 前缀和标准语法三行代码（如
background: linear-gradient(...)）。
- 一键复制：点击“复制”按钮即可将生成的 CSS 代码复制到剪贴板。
适用场景
- 前端开发者在编写 CSS 样式时快速生成渐变背景。
- 设计师在原型设计阶段尝试不同渐变效果。
- 学习 CSS 渐变的初学者通过可视化操作理解参数含义。
