关于 CSS 渐变生成器
该工具用于生成线性、径向、锥形渐变,支持颜色断点编辑、角度/位置参数调节与预设套用。
核心功能
- 多渐变类型:支持
linear-gradient、radial-gradient、conic-gradient。 - 颜色断点管理:添加、删除、修改颜色与位置。
- 参数控制:可调角度、形状、起始角、中心位置等。
- 预设库:一键应用常用渐变风格。
- 代码导出:复制完整 CSS 声明或仅复制渐变值。
使用说明
- 选择渐变类型。
- 设置颜色断点及其位置。
- 调整对应类型参数(角度/形状/中心点等)。
- 预览并复制代码到项目。
使用场景
- 背景视觉与品牌主色氛围构建。
- 按钮、卡片、Banner 的样式增强。
- 动效与图形遮罩中的渐变素材生成。
常见问题
为什么渐变预览提示无效?
通常是颜色值格式或断点位置异常导致,建议检查每个 stop 的颜色与 0–100 范围位置。
线性与锥形渐变如何选择?
线性适合方向过渡,锥形适合环形/扇形视觉表现。