⌒
CSS Easing Generator
cubic-bezier(0.25, 0.10, 0.25, 1.00)
Curve Editor drag handles
Presets 29 easings
CSS Standard
Sine
Quad
Cubic
Quart
Quint
Expo
Circ
Back
Preview
1.0s
CSS Output
cubic-beziercubic-bezier(0.25, 0.10, 0.25, 1.00)
transitiontransition: all 1.0s cubic-bezier(0.25, 0.10, 0.25, 1.00);
animationanimation: slide 1.0s cubic-bezier(0.25, 0.10, 0.25, 1.00);

Related Tools

See all ->
CSS Animation GeneratorKeyframe animation builderCSS Loader GeneratorAnimated spinnersCSS Transform GeneratorTranslate, rotate, scaleCarousel BuilderHTML · CSS · JS · ReactSVG Animation GeneratorCSS, SMIL & GSAPCSS Filter GeneratorVisual image filtersCSS Button GeneratorGradient, neon, glass, 3D buttonsBox Shadow GeneratorCSS shadow studio

CSS Easing Generator — Cubic-Bezier Editor

Updated May 17, 2026
Share & Support

What's included

Features

Draggable SVG curve editor — move P1 and P2 handles directly on the bezier curve
Live animation preview — ball replays automatically on every easing change
27 presets — all Penner easing families (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back), ready to pair with the CSS transform generator
5 CSS keywords — linear, ease, ease-in, ease-out, ease-in-out built-in
Numeric coordinate inputs — type exact X1 Y1 X2 Y2 values with validation
Y overshoot support — Y range [-1.5, 2.5] for Back and spring-style easings
Duration slider — 0.3s to 3.0s preview and output duration control
Three CSS outputs — cubic-bezier value, transition shorthand, animation shorthand
One-click copy — copy any output line instantly with visual confirmation
cbValue in header — always-visible cubic-bezier string with global copy button

About this tool

Pick the Right CSS Easing for Your Animation — Preview It Live, Then Copy the cubic-bezier()

Runs in your browser
No install or signup
Free forever

Your modal slides in but feels wrong — too mechanical, or it overshoots and feels too bouncy. You know you need a different easing function, but picking the right cubic-bezier() values by guessing numbers is tedious. Use this visual editor: drag the handles, watch the ball animate in real time, and copy the value when it feels right.

The curve editor visualizes exactly how your element will accelerate and decelerate. Moving the P1 handle up makes the start faster; moving P2 below the baseline creates an overshoot (spring-like "Back" effect). The animation preview replays automatically with every change. Copy the raw cubic-bezier() value, or grab a ready-to-paste transition or animation CSS line from the output panel.

27 presets covering the full Penner easing library: Sine, Quad, Cubic, Quart, Quint, Expo, Circ, and Back — each with easeIn, easeOut, and easeInOut variants — plus the 5 standard CSS keywords. For most UI animations, start with easeOutCubic for elements entering and easeInCubic for elements leaving. Use easeOutBack for a satisfying spring-settle effect on modals and cards.

Step by step

How to Use

  1. 1
    Drag the curve handlesThe SVG curve editor shows two draggable handles. The purple handle (P1) controls the early phase of the motion — drag it up to make the start faster, down to make it slower. The lighter purple handle (P2) controls the late phase — drag it below the baseline to create an overshoot (the spring-like Back effect). The curve updates immediately and the animation ball replays automatically.
  2. 2
    Pick a named presetScroll the Presets panel on the left and click any named easing. Presets are grouped by family: CSS Standard (linear, ease, ease-in, ease-out, ease-in-out), Sine, Quad, Cubic, Quart, Quint, Expo, Circ, and Back — each with easeIn, easeOut, and easeInOut variants. For everyday UI work, start with easeOutCubic for entering elements and easeInCubic for exiting ones.
  3. 3
    Fine-tune with numeric inputsType exact values into the X1, Y1, X2, Y2 numeric inputs below the curve editor. X values are clamped to 0–1 (time cannot go backward). Y values can range from −1.5 to 2.5 — values outside [0, 1] create undershoot or overshoot effects. The Back presets use Y values like −0.56 and 1.56 for their spring feel.
  4. 4
    Adjust the preview durationUse the Duration slider (0.3–3.0s) in the preview section to match your real animation's speed. Click the ▶ play button to replay the animation at any time. Shorter durations reveal whether fast easings feel snappy or abrupt; longer durations show if slow easings feel smooth or sluggish.
  5. 5
    Copy the CSS outputClick the ⎘ copy icon next to any of the three output rows: the raw cubic-bezier() value, a complete transition shorthand line, or a complete animation shorthand line. The cubic-bezier value is also displayed in the header with its own global Copy button for quick access.

Real-world uses

Common Use Cases

🎨
Make a modal, drawer, or tooltip feel natural on open and close
easeOutCubic or easeOutQuart for entering (decelerates to a natural stop). easeInCubic for leaving (accelerates out). easeOutBack adds a subtle spring-settle without feeling excessive. Apply the curve to full keyframe animations in the CSS animation generator or GSAP playground.
⚡
Add a satisfying spring effect to a button or toggle switch
easeOutBack briefly overshoots the end state before snapping back — creating a tactile click feel. Adjust the duration to 0.2–0.3s for button presses to keep it snappy.
📱
Build smooth page slide transitions for a Next.js or SPA app
easeOutExpo or easeInOutCubic — elements slide in fast and settle gently. Set duration to 0.4–0.5s. Avoid linear (mechanical) and ease-in-out (too slow to start for entering elements).
🔄
Create a skeleton loader or pulse animation that feels organic
easeInOutSine creates a smooth breathing-style pulse. For continuous spinners use linear — any easing creates visual jitter at the loop restart point.
🧩
Apply different easings to separate keyframe steps in @keyframes
Set animation-timing-function inside individual keyframe steps — ease-in from 0% to 50%, ease-out from 50% to 100%. The four coordinate values work directly in keyframe steps.
🛠️
Use the bezier values in GSAP, Framer Motion, or Anime.js
Most JS animation libraries accept cubic-bezier arrays or strings. Copy the X1 Y1 X2 Y2 values from the coordinate inputs for GSAP's ease parameter or Framer Motion's transition.ease.

Got questions?

Frequently Asked Questions

cubic-bezier() is a CSS timing function that controls how an animation or transition progresses over time. The syntax is cubic-bezier(x1, y1, x2, y2) — four values defining two control points of a curve. The x-axis is time (0 = start, 1 = end), the y-axis is progress. By adjusting the control points you create slow starts, fast endings, overshoots, and spring effects. Use it as the timing-function in transition or animation: transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1).

For elements entering the screen, use ease-out or easeOutCubic — they decelerate naturally as the element arrives. For elements leaving, use ease-in (they accelerate out). For modals, drawers, and cards that pop open, easeOutBack adds a subtle spring-settle. For hover effects and micro-interactions, easeInOutSine or easeInOutQuad are smooth without being dramatic. Avoid linear except for continuous loops — any natural motion has acceleration and deceleration.

ease-in starts slow and ends fast — best for elements exiting (they accelerate as they leave). ease-out starts fast and ends slow — best for elements entering (they decelerate as they arrive, feeling natural). ease-in-out starts slow, speeds up in the middle, slows down at end — good for elements moving between two on-screen positions. linear moves at constant speed — only use for loops where natural deceleration creates visible jitter at the restart point.

Use easeOutBack — it briefly overshoots the end state before settling back, creating a spring-like feel. The cubic-bezier values are approximately (0.34, 1.56, 0.64, 1). The overshoot happens because Y2 is above 1, meaning the animation temporarily exceeds its end value. Y values outside [0, 1] are valid in CSS cubic-bezier. For a stronger spring, increase Y2 further; for a subtler one, reduce it toward 1.

Use cubic-bezier() as the timing-function value in the transition shorthand: transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); Or as individual properties: transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); transition-duration: 0.3s; This tool generates a complete ready-to-paste transition line in the CSS output — click the copy icon next to it.

Yes. Apply it as animation-timing-function: animation: slide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); You can also set different timing functions between individual keyframe steps — place animation-timing-function inside keyframe step blocks (0%, 50%, 100%) to create multi-phase motion with different acceleration curves in each phase.

Yes. Most JS animation libraries accept cubic-bezier values as arrays or strings. GSAP uses CustomEase or accepts [x1, y1, x2, y2] arrays. Framer Motion accepts cubic-bezier strings in transition.ease. Anime.js accepts cubic-bezier arrays. The four coordinate values are shown in the X1 Y1 X2 Y2 inputs in this tool — copy them directly.

CSS cubic-bezier allows Y values outside [0, 1], which creates overshoot effects. A Y2 above 1 means the animation temporarily exceeds its end state before snapping back — the "Back" spring effect. A Y1 below 0 creates an undershoot. X values are constrained to [0, 1] because they represent time (time cannot reverse). The Back presets use values like Y1=-0.56, Y2=1.56 for their characteristic spring overshoot.