Content is loading…
Share
Visually craft CSS cubic-bezier easing curves with a live animation preview.
Live preview
cubic-bezier(0.42, 0.00, 0.58, 1.00)Drag the pink and blue handles to shape the curve. Control-point Y can go below 0 or above 1 for anticipation and overshoot.
Cubic-Bezier Easing Editor lets you drag two control points to craft a CSS cubic-bezier() timing curve, preview it live, and copy the value. Start from presets like ease-in-out or a springy back curve. It runs entirely in your browser.
Design custom CSS easing curves visually. Drag the two control points to shape a cubic-bezier timing function, watch a live preview animate with your exact curve (including overshoot and anticipation), and copy the ready-to-use `cubic-bezier(...)` value straight into your CSS. Start from common presets like ease, ease-in-out, or a springy “back” curve, then fine-tune. Perfect for CSS transitions and animations. Runs entirely in your browser.
Share this tool
Visually build CSS gradients and copy the CSS output.
Encode and decode Base64 strings instantly.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.