CSS Easing / Bezier Curve Editor

Overview

A numeric editor for cubic-bezier easing curves. Seven presets load the standard CSS keywords plus two dramatic custom curves, four number inputs set the control points x1, y1, x2 and y2 in 0.01 steps, and a hoverable circle previews the curve with a real one-second transition. The output is the cubic-bezier() value itself, ready to paste into any transition or animation.

How It Works

Click a preset button to load its four control points; the list covers ease, ease-in, ease-out, ease-in-out, linear and two expressive curves named easeInBack and easeOutBounce. Fine-tune any point with the four number inputs, which step by 0.01 and accept values from -1 to 2; editing switches the label to custom. Hover the preview circle to watch it move under a transition governed by your curve. Click the output value to copy cubic-bezier(x1, y1, x2, y2).

Step-by-Step Usage Guide

1. Click a preset to load its control points.
2. Fine-tune x1, y1, x2 and y2 with the inputs.
3. Hover the preview circle to feel the curve.
4. Click the output to copy the cubic-bezier value.

Technical Specifications & Standards

A cubic-bezier easing is a parametric curve anchored at (0, 0) and (1, 1) with your two control points, where x represents time and y the progressed value. The asymmetry between the axes is the whole subtlety: per the easing specification, x coordinates outside 0 to 1 make the entire function invalid, because time cannot run backwards, while y coordinates are unbounded, so y below 0 starts by moving away from the target, the back easing family, and y above 1 overshoots past it, which is how easeOutBounce-style curves land. The inputs allow -1 to 2 on both axes, so the tool will happily show you an invalid x combination; browsers then reject the whole declaration, and the preview circle falls back to no easing. The emitted value formats each point to three decimals.

Targeted Use Cases

• Custom spring-like hover and entrance transitions.
• Anticipation effects where an element dips before moving.
• Matching an animation curve measured from a design tool.
• Standardising one signature easing across a component library.

Notes & Gotchas

• Keep both x values within 0 to 1; an x outside that range invalidates the entire easing function.
• Use y values outside 0 to 1 deliberately, for overshoot above 1 or anticipation below 0.
• Preview with a realistic duration; a curve that feels right at one second may feel sluggish at 200 milliseconds.
• Name and reuse curves instead of inventing a new cubic-bezier per element.

Frequently Asked Questions