Cubic Bezier Generator: Master CSS Easing Curves
· 7 min read
There is a reason some interfaces feel silky smooth while others feel robotic and stiff. It is rarely the color or the layout — it is the motion. The curve that defines how an element accelerates and decelerates across a transition is what separates "nice" from "wow." That curve is a cubic Bezier, and knowing how to control it is one of the most underrated skills in front-end development.
What Is a Cubic Bezier Easing Function?
In CSS, timing functions describe how an animation progresses over its duration. The cubic-bezier() function is the most powerful of these — it lets you define a custom acceleration curve using four numeric values.
Mathematically, a cubic Bezier curve is defined by four points: two anchor points (always fixed at the start and end of the timeline) and two control points that you control. In CSS, the function signature looks like this:
animation-timing-function: cubic-bezier(x1, y1, x2, y2);
- x1, y1 — coordinates of the first control point (P1)
- x2, y2 — coordinates of the second control point (P2)
The x values must stay between 0 and 1 because they represent time. The y values can go beyond that range, which is what creates overshoot and bounce effects.
The curve describes how quickly or slowly the animated value changes at any given moment in time. A steep slope means fast movement; a flat slope means the animation is barely moving.
Built-in CSS Keywords vs. Custom Curves
CSS ships with five named easing keywords, each of which maps to a specific cubic-bezier() value under the hood:
| Keyword | Equivalent |
|---|---|
linear | cubic-bezier(0, 0, 1, 1) |
ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
ease-in | cubic-bezier(0.42, 0, 1, 1) |
ease-out | cubic-bezier(0, 0, 0.58, 1) |
ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
These presets are a good starting point, but they are generic by design. Real-world UI motion often demands something more precise — a snappier entrance, a softer exit, or a curve tuned to the weight and size of a specific element.
/* Generic — works, but forgettable */
.card {
transition: transform 0.3s ease-out;
}
/* Custom — feels crafted */
.card {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
The second example has a y1 value above 1.0, which creates a subtle overshoot — the card springs just past its destination before settling. That one small change makes a transition feel physical and alive.
Benefits of Crafting Custom Easing Curves
Custom cubic Bezier curves give you control that keywords simply cannot provide:
- Brand identity — consistent motion curves reinforce your design language across the entire interface.
- Perceived performance — an element that eases out fast feels more responsive, even if the duration is identical.
- Delight and polish — springy, overshooting curves on micro-interactions create moments users remember.
- Accessibility — gentle ease-in-out curves reduce visual jarring for users sensitive to motion.
How to Use the Cubic Bezier Generator
The Cubic Bezier Generator at Kitsy AI is free, requires no signup, and runs entirely in the browser — your curves are generated client-side with zero data sent to a server.
Here is a step-by-step walkthrough:
Step 1 — Start with a Preset
Open the tool and pick a starting point from the preset library. Options include the standard CSS keywords as well as popular custom curves like easeInBack, easeOutElastic, and easeInOutQuint. Choosing a preset close to your goal saves time.
Step 2 — Drag the Control Points
The interactive canvas shows the curve with two draggable handles representing P1 and P2. Drag them to reshape the curve:
- Pull P1 down and to the right for a slow start that accelerates sharply.
- Push P2 up and to the left for a fast exit that brakes smoothly.
- Move either handle above y=1 or below y=0 to introduce overshoot.
The four numeric values update in real time as you drag.
Step 3 — Preview the Animation
Hit the preview button to watch a live animation play using your current curve. Tweak and preview repeatedly until the motion feels right. You can adjust the animation duration directly in the tool to test how the curve behaves at different speeds.
Step 4 — Copy the CSS
Click the copy button to grab the ready-to-paste cubic-bezier() snippet. Drop it straight into your stylesheet — no manual transcription, no typos.
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
Use Cases for Custom Easing
Transitions
Element transitions — hover states, sidebar reveals, modal entrances — benefit enormously from well-chosen easing. An ease-out curve (fast start, gradual stop) feels natural for elements flying in from off-screen because it mimics how physical objects decelerate.
CSS Animations
For @keyframes animations, you can set the timing function globally or per keyframe step. Custom curves make looping animations feel organic rather than mechanical.
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.badge {
animation: pulse 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
Micro-Interactions
Likes, toggles, checkmarks, button presses — these tiny interactions are where springy curves shine. An overshoot of 10–20% on a scale or translate transform makes a click feel satisfying and physical without being distracting.
Tips for Great Easing Curves
Use overshoot sparingly. A y value of 1.3 creates a subtle spring. A y value of 2.0 creates chaos. Start small and increase only until the motion feels intentional.
Match the curve to the direction. Elements entering a scene should ease-out (quick acceleration, gradual stop). Elements leaving should ease-in (slow start, quick exit). Mismatching these feels wrong even when users cannot name why.
Keep durations short for small elements. A 200ms transition on a button with a punchy ease-out feels snappy. The same 200ms on a full-page modal feels abrupt. Scale duration with element size.
Test at both ends of the speed spectrum. A curve that looks great at 300ms might feel laggy at 150ms or mechanical at 600ms. The Cubic Bezier Generator lets you change duration on the fly so you can test this without leaving the tool.
Common Mistakes to Avoid
Using ease for everything. The default ease keyword is a fine fallback, but relying on it exclusively makes your UI feel undifferentiated. Spend five minutes with a visual generator and you will immediately see the difference.
Symmetric curves for asymmetric actions. An accordion panel opening and closing should not use the same curve in both directions. The open action should ease-out; the close action should ease-in.
Forgetting prefers-reduced-motion. Always wrap decorative motion in a media query for users who have requested reduced motion:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Setting x values outside 0–1. Unlike y values, x values must stay within the 0 to 1 range. Browsers clamp or ignore invalid x values, which can produce unexpected results.
Frequently Asked Questions
What do the four numbers in cubic-bezier() mean?
They represent the x and y coordinates of two control points: cubic-bezier(x1, y1, x2, y2). P1 is at (x1, y1) and P2 is at (x2, y2). The start point is always (0, 0) and the end point is always (1, 1). The x values define timing (must be 0–1); the y values define the animated value's progress and can exceed that range to create overshoot.
How is cubic-bezier() different from ease-in-out?
ease-in-out is a fixed preset equivalent to cubic-bezier(0.42, 0, 0.58, 1). The cubic-bezier() function lets you set any control point coordinates, giving you infinite variations — a much faster ease-in, a bouncier ease-out, or a completely asymmetric curve that no preset can express.
Can I use cubic-bezier in CSS animations and transitions both?
Yes. The cubic-bezier() value works in transition-timing-function, animation-timing-function, and even as a per-step easing within @keyframes. The syntax is identical in all contexts.
What causes a bounce or spring effect?
Setting a y value above 1 or below 0 causes the animated property to temporarily exceed its start or end value, then correct back. For example, cubic-bezier(0.34, 1.56, 0.64, 1) pushes past the final value before settling, creating a spring feel. The further the y value strays from the 0–1 range, the more dramatic the overshoot.
Is the tool free and does it require an account?
Completely free, no account required. The tool runs entirely in your browser — no data leaves your machine. You can bookmark it and use it as many times as you like without any limitations.
Conclusion
Easing curves are one of those invisible details that separate amateur interfaces from professional ones. Once you start crafting custom curves instead of reaching for the same ease-out preset every time, you will notice the difference immediately — and so will your users.
The fastest way to level up your motion design is to spend time with a visual, interactive tool. Open the Cubic Bezier Generator, drag some handles, preview the animation, and paste the result. No installs, no logins, no cost — just better CSS in under a minute.