Custom Cubic Bézier
Build Your Own Curve
cubic-bezier(0.25, 0.1, 0.25, 1)
Preset Easing Functions
How CSS Easing Functions Work
An easing function is a mathematical curve that maps time (x-axis) to animation progress (y-axis). At any point during the animation, the curve tells the browser how far along the animated property should be.
In CSS, easing is set via transition-timing-function or animation-timing-function. Every CSS easing keyword is shorthand for a specific cubic-bezier() value — there are no "magic" keywords.
Understanding the Curve
Cubic Bézier curves are defined by four numbers: cubic-bezier(x1, y1, x2, y2). These define two control points (P1 and P2) on a curve that always starts at (0, 0) and ends at (1, 1).
- Steep sections = fast motion (lots of progress in little time)
- Flat sections = slow motion (little progress over a time span)
- Sections above y=1 = overshoot (the value temporarily exceeds the target)
- Sections below y=0 = undershoot (the value temporarily reverses)
The Five CSS Keywords
| Keyword | cubic-bezier | Behavior |
|---|---|---|
linear | (0, 0, 1, 1) | Constant speed |
ease | (0.25, 0.1, 0.25, 1) | Fast start, slow end (CSS default) |
ease-in | (0.42, 0, 1, 1) | Slow start, fast end |
ease-out | (0, 0, 0.58, 1) | Fast start, slow end |
ease-in-out | (0.42, 0, 0.58, 1) | Slow start, slow end (symmetric) |
Choosing the Right Easing
- Entrances → use
ease-out(element arrives fast, settles into place) - Exits → use
ease-in(element accelerates away) - State changes → use
ease-in-out(balanced, symmetric motion) - Short micro-interactions (<200ms) → use
ease(too fast to perceive the curve) - Playful/bouncy effects → use
easeOutBack(overshoot and spring back)
Click any preset above to load its curve into the custom editor. Read the full guide: CSS Easing Functions Explained.
Frequently Asked Questions
What is a CSS easing function?
A CSS easing function controls the speed of an animation or transition over its duration. It maps time progression to animation progress. Without easing, animations move at constant speed (linear). With easing, they can accelerate, decelerate, or overshoot. Set via transition-timing-function or animation-timing-function.
What does cubic-bezier mean in CSS?
cubic-bezier(x1, y1, x2, y2) defines a custom easing curve using two control points on a Bézier curve. The x-axis represents time (0 to 1) and the y-axis represents animation progress. All CSS easing keywords (ease, ease-in, ease-out, ease-in-out) are shorthand for specific cubic-bezier values.
What is the difference between ease and ease-in-out?
Both start and end slowly, but ease is asymmetric — it starts faster and ends more gradually. ease-in-out is symmetric, with equal acceleration and deceleration. For most UI transitions, ease works well. Use ease-in-out when you want strictly balanced motion.
When should I use ease-in vs. ease-out?
Use ease-out (deceleration) for elements entering the screen — they arrive quickly and settle into place. Use ease-in (acceleration) for elements exiting — they speed up as they leave. This matches how physical objects behave under friction and gravity.
Can cubic-bezier values be negative?
The x-values (x1 and x2) must be between 0 and 1 — time cannot go backward. The y-values (y1 and y2) can be any number. Negative y-values cause undershoot (the animation temporarily reverses). Values above 1 cause overshoot (the animation exceeds the target and springs back).
What is the default CSS easing?
The default for both transition and animation is ease, equivalent to cubic-bezier(0.25, 0.1, 0.25, 1). To get constant-speed motion, you must explicitly set linear.
What is the difference between linear and ease?
linear moves at constant speed from start to finish. ease starts quickly, decelerates, and ends slowly. ease feels more natural for most UI animations because real objects don't move at constant speed.
How do easing functions work in @keyframes?
In @keyframes animations, the easing applies between each pair of keyframes independently, not across the entire animation. You can set different timing functions within individual keyframes for fine-grained control.
What are easeInSine, easeOutCubic, and similar names?
These are named easing curves from animation libraries, categorized by math function: Sine (gentle), Quad (moderate), Cubic (strong), Quart (pronounced), and Back (overshoot). Each comes in three variants — In, Out, and InOut. They are expressed as specific cubic-bezier values in CSS.
Does this tool store my data?
No. Everything runs in your browser using JavaScript. No data is sent to any server. The tool works offline after the page loads.
Related Tools
- CSS Gradient Generator — build CSS gradients with live preview
- Box Shadow Generator — create CSS box-shadow effects visually
- Border Radius Generator — design CSS border-radius with preview
- CSS Unit Converter — convert between px, rem, em, and vw
- CSS Specificity Calculator — calculate selector specificity scores
- CSS Easing Functions Explained — complete guide to timing functions, cubic-bezier, and animation best practices
Privacy & Limitations
- Client-side only. No data is sent to any server. No cookies, no tracking.
- Cubic Bézier only. This tool visualizes standard cubic-bezier curves. It does not support the newer CSS
linear()function orsteps(). - X-values clamped to 0–1. The tool enforces the CSS specification constraint that x1 and x2 must be between 0 and 1. Y-values are unclamped to allow overshoot and undershoot curves.
Related Tools
View all toolsBig-O Notation Visualizer
Interactive plot of O(1) through O(n!) complexity curves with operation count comparison
JSON Formatter
Format and beautify JSON with proper indentation
JSON Validator
Validate JSON syntax and show errors
CSV to JSON Converter
Convert CSV data to JSON format with auto-detection
JSON to CSV Converter
Convert JSON arrays to CSV format with nested object handling
JWT Decoder
Decode JWT tokens and display header and payload
Easing Function Explorer FAQ
What is a CSS easing function?
A CSS easing function controls the speed of an animation or transition over its duration. It maps time progression to animation progress. Without easing, animations move at constant speed (linear). With easing, they can accelerate, decelerate, or overshoot. CSS easing is set via transition-timing-function or animation-timing-function.
What does cubic-bezier mean in CSS?
cubic-bezier(x1, y1, x2, y2) defines a custom easing curve using two control points on a Bézier curve. The x-axis represents time (0 to 1) and the y-axis represents animation progress (0 to 1, or beyond for overshoot). The four values position two control points that shape the curve. All CSS easing keywords (ease, ease-in, ease-out, ease-in-out) are shorthand for specific cubic-bezier values.
What is the difference between ease and ease-in-out?
Both start and end slowly, but ease (cubic-bezier(0.25, 0.1, 0.25, 1)) is asymmetric — it starts faster and ends more gradually. ease-in-out (cubic-bezier(0.42, 0, 0.58, 1)) is symmetric, with equal acceleration and deceleration. For most UI transitions, ease is fine. Use ease-in-out when you want strictly balanced motion.
When should I use ease-in vs. ease-out?
Use ease-out (deceleration) for elements entering the screen — they arrive quickly and settle into place. Use ease-in (acceleration) for elements exiting the screen — they speed up as they leave. This matches how physical objects behave under friction and gravity.
Can cubic-bezier values be negative?
The x-values (x1 and x2) must be between 0 and 1 because time cannot go backward. The y-values (y1 and y2) can be any number. Negative y-values cause the animation to temporarily reverse (undershoot) before reaching the target. Values above 1 cause the animation to overshoot the target and spring back.
What is the default CSS easing?
The default easing for both CSS transitions and animations is ease, which is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1). If no timing-function is specified, the browser applies ease automatically. To get constant-speed motion, you must explicitly set linear.
What is the difference between linear and ease?
linear (cubic-bezier(0, 0, 1, 1)) moves at constant speed — the same rate from start to finish. ease (cubic-bezier(0.25, 0.1, 0.25, 1)) starts quickly, decelerates through the middle, and ends slowly. ease feels more natural for most UI animations because real objects don't move at constant speed.
How do easing functions work in CSS keyframe animations?
In @keyframes animations, the easing function applies between each pair of keyframes independently, not across the entire animation. For example, if you have keyframes at 0%, 50%, and 100% with ease-out, the easing curve runs separately for the 0%→50% segment and the 50%→100% segment. You can set different timing functions within individual keyframes for more control.
What are easeInSine, easeOutCubic, and similar names?
These are named easing curves from established animation libraries, categorized by the mathematical function they approximate: Sine (gentle), Quad/t² (moderate), Cubic/t³ (strong), Quart/t⁴ (pronounced), and Back (overshoot). Each comes in three variants — In (acceleration), Out (deceleration), and InOut (both). They are expressed as specific cubic-bezier values in CSS.
Does this tool store my data?
No. The easing function explorer runs entirely in your browser using JavaScript. No data is sent to any server. The tool works offline after the page loads.
What is the CSS linear() function?
linear() is a newer CSS easing function (Chrome 113+, Firefox 112+, Safari 17.2+) that lets you define arbitrary easing curves as a series of points, rather than using two Bézier control points. It can express bounce effects, spring physics, and multi-segment curves that cubic-bezier cannot represent.