CSS Cubic Bezier Generator

About CSS Cubic Bezier

The cubic-bezier() function defines a timing curve for CSS transitions and animations. It determines how the intermediate values of a CSS property change over time, creating smooth, natural-looking motion.

Understanding the Curve

• The X-axis represents time (0 = start, 1 = end)
• The Y-axis represents progress (0 = initial state, 1 = final state)
• The curve is defined by two control points (P1 and P2)
• Start point (0,0) and end point (1,1) are fixed
• Y values can exceed 0-1 range to create overshoot effects

Built-in Timing Functions

• linear: cubic-bezier(0, 0, 1, 1) - Constant speed
• ease: cubic-bezier(0.25, 0.1, 0.25, 1) - Default, gentle acceleration
• ease-in: cubic-bezier(0.42, 0, 1, 1) - Slow start
• ease-out: cubic-bezier(0, 0, 0.58, 1) - Slow end
• ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) - Slow start and end

How to Use

• Drag the control points to adjust the curve shape
• Use presets as starting points for common easing types
• Preview your easing with the animation demo
• Compare your curve against built-in timing functions
• Copy the generated CSS for use in your projects

Best Practices

• Use ease-out for elements entering the viewport
• Use ease-in for elements leaving the viewport
• Keep durations short (200-500ms) for UI interactions
• Use overshoot sparingly for playful, bouncy effects