ZenovayTools

CSS Easing / cubic-bezier Generator

Visually create and preview CSS cubic-bezier easing functions. Drag control points on the interactive curve, choose from presets, and copy the CSS timing function.

Presets

Drag the control points

x10.42
y10.00
x20.58
y21.00

CSS Output

transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

animation-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

How to Use CSS Easing / cubic-bezier Generator

  1. 1Choose an easing preset or drag the control points to create a custom curve.
  2. 2Preview the animation in real time with a moving ball.
  3. 3Copy the cubic-bezier() CSS value for use in your transitions.
Zenovay

Track your website performance

Real-time analytics, session replay, heatmaps, and AI insights. 2-minute setup, privacy-first.

Try Zenovay Analytics — Free

Related Tools

CSS Gradient GeneratorCreate beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.
CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.
CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.

Frequently Asked Questions

What is cubic-bezier() in CSS?▾
cubic-bezier(x1, y1, x2, y2) defines a cubic Bezier curve used as a CSS timing function for transitions and animations. The curve is defined by 4 points: P0=(0,0) start, P1=(x1,y1) control point 1, P2=(x2,y2) control point 2, P3=(1,1) end. x1, x2 must be in [0,1] (time axis). y1, y2 can be outside [0,1] for overshoot effects. CSS keywords map to specific curves: ease = (0.25, 0.1, 0.25, 1.0), ease-in = (0.42, 0, 1.0, 1.0), ease-out = (0, 0, 0.58, 1.0), ease-in-out = (0.42, 0, 0.58, 1.0), linear = (0, 0, 1, 1).
What is the difference between ease-in, ease-out, and ease-in-out?▾
ease-in: starts slow, ends fast — like an object starting from rest (gravity). ease-out: starts fast, ends slow — like a ball landing on a surface. ease-in-out: slow start, fast middle, slow end — symmetric S-curve. linear: constant speed throughout. ease: the CSS default — slightly ease-in, then ease-out. Rules of thumb: use ease-out for elements entering the screen (feels natural). Use ease-in for elements leaving (accelerating off-screen). Use ease-in-out for state transitions. Never use linear for UI — it feels mechanical and robotic.
What are spring animations and how do they differ from bezier?▾
Cubic-bezier: fixed duration, physics-agnostic timing. The animation always takes exactly the specified duration. Spring: physics-based with mass, stiffness, damping, and velocity. Duration is not fixed — it runs until the system settles. Springs can overshoot and oscillate naturally. CSS doesn't support springs natively — they require JavaScript (Framer Motion, React Spring, GSAP). For pure CSS, cubic-bezier with y values outside [0,1] approximates spring overshoot. Example: cubic-bezier(0.34, 1.56, 0.64, 1) creates a mild spring-like overshoot.
How do I choose the right easing for my animation?▾
Principles: objects in the real world don't start or stop instantaneously. Follow material interactions: elements entering the screen should ease out (decelerate as they arrive). Elements leaving should ease in (accelerate as they depart). State changes (expanding, collapsing) use ease-in-out. Micro-interactions (button press) use ease-out for the response, ease-in for reset. Material Design uses: standard curve (0.4, 0, 0.2, 1), deceleration (0, 0, 0.2, 1), acceleration (0.4, 0, 1, 1). iOS uses spring animations with slight overshoot.
What is CSS linear() for complex animations?▾
CSS linear() (2023) enables multi-stop linear interpolation — essentially a piecewise linear function approximating complex curves. Syntax: animation-timing-function: linear(0, 0.25, 1); A bounce easing: linear(0, 0.063, 0.25 18.2%, 1 36.4%, 0.813 54.5%, 1 72.7%, 0.941 81.8%, 1). This is how you get spring, bounce, and complex physics animations without JavaScript. The JavaScript generateLinearEasing() function from the web animations API can calculate these values from any physics simulation. Browser support: Chrome 113+, Firefox 112+, Safari 17.2+.