Cubic Bezier Generator
cubic-bezier(0.25, 0.1, 0.25, 1)transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);Related external tools
Some links are affiliate links.
Related tools
Design a custom CSS easing curve by dragging two handles, watch the motion play out in a live preview, and copy the ready-to-use cubic-bezier() value and transition code. It is perfect for fine-tuning how animations feel. Everything runs in your browser.
How to use
- Drag the two colored handles, or type exact values for x1, y1, x2 and y2.
- Press replay to preview the motion the curve produces.
- Copy the cubic-bezier() value or the full transition line into your CSS.
How it works
A CSS easing curve is a cubic Bezier with fixed endpoints at (0,0) and (1,1). Two control points shape the curve between them, and their coordinates are the four numbers in cubic-bezier(x1, y1, x2, y2). The x values must stay between 0 and 1 (time always moves forward), but the y values can go below 0 or above 1 to create anticipation or overshoot effects.
Features
Drag to shape
Move the handles directly on the curve to feel out the easing you want.
Exact values
Type precise coordinates when you need to match a spec or design system.
Live preview
Replay the motion so you can judge the easing before using it.
Standard presets
Start from ease, linear, ease-in, ease-out or ease-in-out and tweak from there.
Copy-ready code
Copy the cubic-bezier() value or a complete transition declaration.
When to use it
UI motion
Tune how buttons, modals and panels move so transitions feel natural.
Microinteractions
Add subtle overshoot or anticipation to small interactions for personality.
Consistent easing
Define one custom curve and reuse it across a project for a unified feel.
Learning
See how control points change motion to understand easing functions.
Notes
- The x values are clamped to 0–1 because time cannot move backward.
- The y values may exceed 0–1 to create bounce or overshoot effects.
- The built-in presets approximate the standard CSS keywords.
- Everything runs on your device; nothing is uploaded.
FAQ
- What is a cubic-bezier easing?
- It is a timing function for CSS transitions and animations defined by two control points, written as cubic-bezier(x1, y1, x2, y2), that shapes how a property changes over time.
- Can the y value be above 1 or below 0?
- Yes. Y values outside 0–1 make the animation overshoot or pull back, creating bounce-like effects. Only the x values are restricted to 0–1.
- How does this relate to ease and ease-in-out?
- Those keywords are specific cubic-bezier curves. Use the presets to start from them, then drag the handles to customize.
- Where do I paste the result?
- Use the cubic-bezier() value as the timing function in a transition or animation, for example transition: all 0.4s cubic-bezier(...).
- Is anything sent to a server?
- No. The editor runs entirely in your browser and nothing is uploaded.