Design Drifter
All Tools
Cubic Bezier Editor
Visually edit a CSS cubic-bezier easing curve.
Designcubic-bezier(0.25, 0.1, 0.25, 1)Files are processed in your browser and never uploaded.
About
A focused browser tool from the Design Drifter roadmap. It is designed to finish one practical image, file, design, developer, or SEO task quickly, with local processing whenever possible.
Tune a CSS transition curve visually with draggable control points, numeric inputs, and a live motion preview.
What you can do
- Drags both cubic-bezier control points.
- Keeps x values between 0 and 1 for valid CSS timing functions.
- Copies a ready-to-use cubic-bezier declaration.
Common uses
- Design a custom button hover transition.
- Compare easing curves while prototyping motion.
- Find a curve for a loading or entrance animation.
Frequently asked questions
What do x1, y1, x2, and y2 mean?
They are the two control points that shape a cubic Bezier timing curve; x values normally stay between 0 and 1.
Can y values go outside 0 and 1?
CSS allows overshoot y values, but this focused editor keeps all four values in the easy-to-understand 0–1 range.