无需登录 数据私有 本地保存

渐变曲线采样器 - 沿贝塞尔曲线插值颜色

12
0
0
0
🎨 颜色锚点
2个锚点
💡 点击曲线上任意位置添加锚点 | 双击锚点可删除
✨ 预设曲线
⚙️ 采样设置
40
📋 CSS 渐变代码
background: linear-gradient(to right, #4a6cf7 0%, #ec4899 100%); ✓ 已复制!
📌 CSS使用多个色标近似贝塞尔曲线渐变
📚 常见问题与知识点

贝塞尔曲线渐变采样是沿三次贝塞尔曲线的弧长均匀采样颜色，生成非线性渐变。与普通CSS线性渐变不同，曲线渐变可以产生S形、C形、波浪形等复杂颜色过渡，让渐变更有流动感和设计感。采样时，工具沿曲线弧长等距取点，每个采样点的颜色由曲线上锚点颜色插值得到。

添加锚点：直接点击Canvas画布上的贝塞尔曲线即可在点击位置添加新锚点。系统会自动将锚点吸附到曲线上最近的位置。
移动锚点：拖拽锚点沿曲线滑动，改变其在曲线上的位置（t参数）。
更改颜色：点击锚点选中后，使用颜色选择器或点击预设色块更改颜色。
删除锚点：双击锚点或选中后点击"删除"按钮（至少保留2个锚点）。

三次贝塞尔曲线由4个点定义：P0（起点）、P1（控制点1）、P2（控制点2）、P3（终点）。曲线的实际路径只经过P0和P3，P1和P2作为"磁力点"影响曲线弯曲程度和方向。
• P1靠近P0：曲线起始段更陡峭，颜色快速变化
• P2靠近P3：曲线结束段更陡峭
• P1和P2反向：产生S形曲线，颜色过渡有起伏
拖拽控制点（方形手柄）可实时改变曲线形状和渐变效果。

工具生成的CSS使用linear-gradient配合多个色标来近似贝塞尔曲线渐变。由于CSS原生不支持曲线渐变，工具在曲线上采样多个点，将每个采样点的颜色和位置转换为色标。
采样点数越多（可调整8-120），CSS近似越精确。复制代码后可直接粘贴到CSS中使用，适用于background、background-image等属性。
也支持导出为SVG渐变或直接在设计中参考颜色序列。

参数采样（t均匀）：在贝塞尔曲线参数t上等距采样（t=0, 0.1, 0.2, ...）。由于曲线在不同t值处的"速度"不同，采样点在曲线上的实际间距不均匀——弯曲处采样点更密集。
弧长采样（本工具默认）：沿曲线实际弧长等距采样。先计算曲线总弧长，再按等距取点。这样颜色在视觉上分布更均匀，渐变更平滑自然。
本工具使用弧长采样，确保渐变预览条中的颜色过渡与实际曲线弧长一致。

• UI/UX设计：创建独特的按钮渐变、卡片背景、进度条
• 网页背景：生成流动感的页面背景渐变
• 数据可视化：为图表和热力图设计非线性颜色映射
• 品牌设计：探索品牌色之间的创意过渡方案
• CSS艺术：制作复杂的CSS渐变图案和动画
• 学习工具：直观理解贝塞尔曲线和颜色插值原理
🔧 相关工具