Cubic Bezier Editor
Design custom CSS animation timing functions with draggable control points, live animation preview, and comparison mode. Fine-tune your easing curves visually.
How It Works
- Drag the two control points on the curve to shape your easing
- Use number inputs for precise control (Y values can exceed 0-1 for bounce effects)
- Click presets to load common timing functions
- Hit Play to preview the animation with comparison tracks
- Copy the CSS value to use in your transitions and animations
Features
- Draggable control points with visual handles
- 15 built-in presets covering all common easings
- Live animation preview with adjustable duration
- Linear and ease comparison tracks
- Loop mode for continuous preview
- Precise numeric input with overshoot support
- One-click CSS copy to clipboard
- Responsive design for all screen sizes
What is a Cubic Bezier Editor?
A cubic bezier editor is a visual tool for creating custom CSS animation timing functions. Instead of guessing values or relying on basic keywords like "ease" or "linear", this free online cubic bezier editor lets you drag control points on a curve to shape exactly how your animation accelerates and decelerates over time. Everything runs in your browser with no uploads or sign-ups required.
CSS animations use the cubic-bezier() function to define motion curves, but writing those four numeric values by hand is nearly impossible to get right. Designers, front-end developers, and motion specialists use visual bezier editors to craft natural-feeling transitions for buttons, modals, page elements, and micro-interactions.
How to Use This Tool
Follow these steps to create a custom CSS animation timing function with this free online cubic bezier editor:
- Drag the control points - Click and drag the two cyan handles on the curve canvas. The first point (P1) controls the start of the animation, and the second point (P2) controls the end. Y values beyond 0 and 1 create overshoot and bounce effects.
- Use presets as a starting point - Click any of the 15 built-in presets (ease-in, ease-out, easeInBack, snap, etc.) to load common easing curves, then tweak the handles to customize further.
- Preview your animation - Hit the Play button to see a ball animate across the track using your curve. Adjust the duration slider from 200ms to 3000ms and enable Loop mode for continuous comparison. Two comparison tracks (linear and standard ease) animate simultaneously so you can see the difference.
- Copy the CSS value - Click the Copy button next to the output to grab the cubic-bezier() function string. Paste it directly into your CSS transition-timing-function or animation-timing-function property.
Key Features
- Draggable SVG control points - Grab and move handles directly on the curve with mouse or touch. Handles glow and scale on hover for precise positioning.
- 15 built-in easing presets - Includes linear, ease, ease-in, ease-out, ease-in-out, sine, quad, cubic, and back variants plus a snap preset. Active preset highlights automatically.
- Live animation preview with comparison - Animated ball shows your curve in action alongside linear and ease reference tracks, so you can immediately see how your custom curve differs from the defaults.
- Overshoot and bounce support - Y values range from -0.5 to 1.5, allowing you to create curves that go beyond the start or end position for elastic and spring-like effects.
- Precision numeric inputs - Type exact X1, Y1, X2, Y2 values with 0.01 step increments when dragging isn't precise enough for your needs.
Common Use Cases
Front-end developers use this cubic bezier editor when building button hover transitions, dropdown menus, modal open/close animations, and page scroll effects that need to feel natural rather than robotic. Motion designers use it to prototype timing curves before implementing them in CSS or passing values to developers. It is especially useful when creating bouncy or elastic animations (like a notification badge popping in), since those require Y values outside the 0-1 range which are impossible to visualize without a dedicated curve editor. UI engineers working with design systems also use it to define consistent easing tokens that get shared across an entire product.
Frequently Asked Questions
What does cubic-bezier() do in CSS?
The cubic-bezier() CSS function defines a custom timing curve for transitions and animations. It takes four numbers (x1, y1, x2, y2) that represent the positions of two control points on a bezier curve. The curve maps time (horizontal axis) to animation progress (vertical axis), controlling how fast or slow the animation moves at each point during its duration.
How do I create a bounce or overshoot effect with cubic-bezier?
Set Y values outside the 0 to 1 range. A Y2 value greater than 1 (like 1.5) makes the animation overshoot its end position and snap back, creating a bounce at the end. A Y1 value less than 0 (like -0.5) makes it pull back before moving forward. In this editor, drag the control points above or below the canvas bounds, or type values like 1.4 or -0.3 in the numeric inputs.
What is the difference between ease, ease-in, and ease-out?
"ease" (the CSS default) starts slow, accelerates through the middle, and decelerates at the end. "ease-in" starts slow and accelerates toward the end, making elements feel like they are picking up speed. "ease-out" starts fast and decelerates, giving a smooth landing effect. Use this editor's presets and comparison tracks to see exactly how they differ in practice.
Can I use cubic-bezier values from this tool in JavaScript animations?
Yes. The four values you copy from this editor work with the Web Animations API (element.animate() with an easing property), GSAP (ease: CustomEase), Framer Motion (transition: { ease: [x1, y1, x2, y2] }), and any animation library that accepts cubic bezier control points. The format is universal across CSS and JavaScript animation tools.
Why are X values limited to 0-1 but Y values can go beyond?
The X axis represents time, which must always move forward (0 to 1). If X values went outside 0-1, the animation could go backwards in time, which is physically impossible. The Y axis represents progress, which can overshoot or undershoot the target position. This is what creates elastic and spring-like effects where an element goes past its destination before settling back.