Shape a cubic-bezier curve and watch the motion as you go
Drag the two control points of a cubic-bezier() curve and the preview moves with them, so you can judge an easing by watching it.
Build custom CSS easing curves with Cubic Bezier Architect
Cubic Bezier Architect lets you draw a custom easing curve, watch it play out on a moving element, and read off the cubic-bezier() value to drop straight into a transition or animation property. It's for anyone who's tired of choosing between ease-in-out and a curve copied from a forum post, and wants to see exactly how the shape of a curve changes how motion feels before it goes into a stylesheet.
-
Get to grips with the two control points
Drag the P1 and P2 handles and see how bending the line between the fixed start and end points changes acceleration and deceleration.
-
Preview the motion, not just the shape
Watch a sample element move along the curve, because a shape that looks dramatic on the graph can feel almost flat once it's animating a button.
-
Copy the timing function into your CSS
Take the generated cubic-bezier() value and check it against the curve preview before it goes anywhere near production CSS.
Cubic Bezier Architect
Shape a CSS cubic-bezier easing curve. Drag the two handles on the graph or type exact numbers, watch the preview move using that exact curve, then copy the finished value into your CSS.
The browser's own initial transition timing is ease, so this tool loads with the values for
ease below. ease-in-out is a separate, symmetric preset offered further down,
it is not the default.
Drag the handle nearer the start of the curve, or the handle nearer the end of the curve, to reshape it. Steeper sections mean faster movement, flatter sections mean slower movement. The horizontal position of each handle is clamped between 0 and 1 because time cannot run backwards. The vertical position is left free, so curves can overshoot past 0 or 1 for spring style effects.
cubic-bezier(0.25, 0.1, 0.25, 1)
Preview
The dot eases across the track using your curve, then resets instantly to the start, that reset itself is never eased. This loops every 2 seconds on a single timer, so what you see is only the curve you chose.
See the curve before you write the code
Cubic Bezier Architect lets you drag the control points of a cubic-bezier() curve and watch the motion play out in real time, then copy the values straight into your stylesheet. It's built for anyone tuning a transition, a hover state, or a loading animation who wants to feel the timing. The preview shows you the shape of the motion, not how every browser will render it, so it's worth checking the animation in context before you ship it.
No sign-up, no install, just copy the code.
Popular Tools
CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Variable Architect
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / True-Contrast Smart Palette
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Unit Converter (px / rem / em / vw / vh)
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / Aspect Ratio CalculatorCSS Grid Architect
An interactive CSS Grid Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Grid ArchitectCSS Specificity Calculator
An interactive CSS Specificity Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Specificity Calculator