缓动曲线编辑器
Easing Curve Editor
对着动画预览调 cubic-bezier 或弹簧曲线，并导出 CSS 的时间函数。
拖动一条三次贝塞尔缓动曲线，看它对真实运动做了什么——一个由浏览器自己的合成器驱动的方块，外加一条按等时间步采样同一曲线的条带，让形状可读，而不只是可感。
两个点都可以拖，也可以先聚焦再用方向键；按住 shift 一次走十倍。有底纹的那条带子是 0 到 1，上下多出来的空间是过冲——因为 CSS 只限制 x、把 y 放开了，才会有这块地方。
x 被限制在 0–1，是 CSS 要求的：超出这个范围，整条声明就无效，浏览器直接丢掉。y 是故意放开的：超过 1 是过冲，低于 0 是先往回收，而人手动改曲线，大半就是为了这两样。
下面那条带子，是把同一条曲线按二十个等长的时间点取样。刻度挤在一起，说明那一段慢；散开，说明快——这就是把曲线的形状说成运动。
预设
CSS
transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);怎么用
拖动两个控制点
或者聚焦一个然后用方向键——按住 Shift 移动十倍距离。下面的数字接受直接输入，供你有一条曲线要复现的时候用。
看条带，不看方块
一个运动的方块很难读。它下面的标记是曲线在二十个等时间步上的位置：挤在一起是慢，散开是快。
复制值或整条 transition
如果你的点正好落在一个关键字上——`ease`、`ease-in-out`——就输出那个关键字，因为它更短，也说明了意图。
常见问题
为什么不能把 x 拖到 0–1 之外？
因为 CSS 禁止。x 超出这个范围会让整条声明无效，浏览器丢掉这个属性——所以工具做了钳位，而不是让你做出一个悄悄什么都不干的东西。
y 超出 0–1 是干什么用的？
超过 1 是过冲——元素越过目标再回落——低于 0 是预备动作，它先往回拉再动。这两种是人们不取关键字而去编辑曲线的大部分理由。
预览准确吗？
准确——它把时间函数作为 CSS 动画交给浏览器，和你的 `transition` 走的是同一条代码路径。在 JavaScript 循环里采样曲线看起来会很像，但不是同一回事。
能做出弹簧或弹跳吗？
做不出真正的。三次贝塞尔有两个控制点，只能过冲一次；弹簧会振荡，需要带很多停靠点的 `linear()`，或者基于物理的动画库。这里的过冲是单条曲线能做到的最接近的效果。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS，不重排任何声明，原本的记号序列一个不动。
CSS 阴影生成
Box Shadow Generator
一边预览一边叠多层盒阴影和文字阴影，并导出对应的 CSS。
SVG 路径编辑器
SVG Path Editor
在绝对和相对命令之间转换路径数据，做平移、缩放、旋转和方向反转，并显示包围盒和实时预览。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。