Drag two handles, watch the loop, copy the snippet. 12 preset easings plus full freedom for back / overshoot curves.
Preview · 1.5s loop
Presets
CSS
transition-timing-function: cubic-bezier(0.160, 1.000, 0.300, 1.000);
Tailwind v4 @theme
@theme {
--ease-brand: cubic-bezier(0.160, 1.000, 0.300, 1.000);
}framer-motion
{ ease: [0.160, 1.000, 0.300, 1.000] }Start from a preset
Twelve named easings cover every common case. Or drag from scratch.
Drag the handles
Each control point can leave the [0..1] Y range for back / overshoot-style curves.
Watch the preview
A 1.5-second loop shows exactly how the curve feels when it's applied to an animation.
Copy the snippet
Plain CSS, a Tailwind v4 ease token, or a framer-motion [x1, y1, x2, y2] array.
Ease-out decelerates smoothly but gently; out-expo slams hard at the start then eases to a stop. For transitions entering the screen, out-expo feels modern and snappy; for state changes, a softer ease-out reads calmer.
Yes. Y values between -1 and 2 are allowed — that's what unlocks back / overshoot easings where the element passes its target and snaps back. X stays in [0, 1] to keep the animation monotonic in time.
Yes. framer-motion accepts `ease: [x1, y1, x2, y2]`. The snippet panel outputs exactly that — just paste it into your motion prop.
Both. transition-timing-function and animation-timing-function both accept the cubic-bezier() value.
Box shadow
Multi-layer CSS box-shadow editor with Tailwind color picker and preset stacks.
Gradient generator
Build Tailwind-palette gradients and export wallpaper, social, and OG sizes.
Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.
Explore lokal