Cubic Bezier Generator
Drag control points to design a CSS cubic-bezier() easing curve, preview it in motion, and copy the value.
Runs 100% in your browser
Shortcuts
- Copy the output
- Alt + Shift + C
Your input is saved in this browser only. Reset clears it.
Presets
Animation Preview
How to use
Drag the blue and purple handles on the curve, or type values directly. Copy and paste into your CSS:
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);How to use the Cubic Bezier Editor
-
Drag the P1 and P2 handles, pick a preset, or type exact values.
-
Run the preview animation to see the easing in motion.
-
Copy the cubic-bezier() value, or copy a link to share the curve.
Example: An easing curve that overshoots
P1: 0.34, 1.56 P2: 0.64, 1
cubic-bezier(0.34, 1.56, 0.64, 1)
The y value above 1 makes the animation pass its target and settle back, which reads as a small bounce.
Frequently Asked Questions
What does cubic-bezier() do in CSS?
It defines the easing curve of a transition or animation: how progress changes over time. The four numbers are the coordinates of two control points, x1, y1, x2, y2. The x values must stay between 0 and 1 (time), while y values can go outside that range to overshoot.
What are the standard easing keywords?
ease is cubic-bezier(0.25, 0.1, 0.25, 1), linear is cubic-bezier(0, 0, 1, 1), ease-in is cubic-bezier(0.42, 0, 1, 1), ease-out is cubic-bezier(0, 0, 0.58, 1), and ease-in-out is cubic-bezier(0.42, 0, 0.58, 1).
Which easing should I use for UI animation?
Ease-out for elements entering or responding to a click: fast at first, settling gently. Ease-in for elements leaving. Ease-in-out for movement between two on-screen positions. Linear looks mechanical for movement, but is right for continuous spinners and progress bars.
How do I make a bouncy or overshooting curve?
Pull a control point's y value above 1 or below 0. For example cubic-bezier(0.34, 1.56, 0.64, 1) overshoots the end value and settles back, which reads as a small bounce. Keep it subtle and respect prefers-reduced-motion.
About the Cubic Bezier Editor
Easing curves are one of those things that separate animations that feel designed from ones that feel thrown in. But writing cubic-bezier() values by hand is guesswork. This editor lets you drag the handles instead.
8 Free Tools for JSON, Color, and CSS Work shows how this editor fits with the clip-path and keyframe tools.
How it works
A cubic bezier timing function takes four numbers: x1, y1, x2, y2. The start and end points are fixed at (0, 0) and (1, 1). The two control points — P1 and P2 — are the ones you're actually moving. The x-axis is time, the y-axis is how far through the animated value the element is.
When a control point's y-value goes outside the 0-to-1 range, the curve overshoots. That's where the "back" and "elastic" effects come from. The canvas shows a shaded overshoot zone so those handles stay visible even when they go past the unit square.
Eight presets are built in, from the standard CSS keyword easings to expressive overshoot curves. The live preview plays a box across a track using whatever curve you're working with. Hit Play, watch it move, adjust if it's not right. When it feels good, copy the value and paste it into your CSS.
Using it in CSS
Transition shorthand
transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
Animation timing function
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
Pro Tip
For modals and drawers, ease-out (fast start, slow end) feels most natural to users. Ease-in-out works well for looping animations. And ease-out-back is the one to reach for when you want that satisfying little overshoot on an entrance.