CSS Cubic Bezier Easing Curve Generator
Drag two control points to shape a custom easing curve and compare it against standard easings in a live preview. Push a point past 1 for a spring-like overshoot, then copy the cubic-bezier() value.
Cubic Bezier Generator
Create custom CSS easing curves for transitions
Click a name to apply. Click the ○ to overlay it on the graph for comparison.
x is clamped to 0–1 (required by CSS). y may overshoot for bounce/spring effects.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);Quick Start
- 1Drag the two control points to shape the curve
- 2Compare your curve against ease, ease-in, and ease-out
- 3Push a point above 1 for a bounce or overshoot
- 4Copy the cubic-bezier() CSS timing function
More Generate Tools
All generators →Generate a CSS Gradient Button with Hover
Design a CSS gradient button with a smooth hover effect and copy the code. Free online gradient button generator, no signup.
Generate a CSS 3D Push Button
Create a CSS 3D push button that looks pressed on click. Free online 3D button generator with hover and active states, no signup.
Generate Frosted Glass Card CSS
Create a frosted glass card with the glassmorphism effect and copy the CSS. Free online frosted glass generator with Safari prefix, no signup.
Generate a Glassmorphism Navbar CSS
Create a translucent glassmorphism navbar and copy the CSS. Free online glass navbar generator with blur and fallback, no signup.
Generate a Neumorphic Soft UI Button CSS
Create a soft UI neumorphic button with dual box shadows and copy the CSS. Free online neumorphism button generator, no signup.
Generate JSON Schema from an API Response
Paste a JSON API response and generate a valid JSON Schema for validation. Free online JSON Schema generator, runs in your browser.
Looking for FAQs and advanced options? Visit the full Cubic Bezier Generator page →