TinyTools

🌊 DESIGN

Easing Curves Studio

Craft CSS easing curves — Bézier, spring, bounce, wiggle, overshoot — with live preview and CSS plus Tailwind output.

Your files are processed directly on your device and are not uploaded to our servers.

Curve

Bézier handles

Preview

transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1)

Code

CSS

.animated {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

Tailwind

ease-[cubic-bezier(0.22,_1,_0.36,_1)]

Use with transition utilities, e.g. className=transition-transform duration-500 {tailwind}.

How to use

  1. Pick a curve type: Bézier, spring, bounce, wiggle, or overshoot — or start from a preset.
  2. Drag the sliders to shape the curve and watch the live preview.
  3. Copy the CSS snippet or Tailwind class into your project.

FAQ

What is an easing function?
An easing function controls how fast an animation progresses over time. Linear moves at a constant speed, ease-out starts fast and slows down, spring overshoots and settles, and bounce hits the end with playful rebounds.
How do I use the generated CSS?
Copy the CSS snippet into your stylesheet and add the animated class to your element. For Tailwind, copy the ease-[...] class onto the element alongside transition utilities like transition-transform duration-500.
Why do spring, bounce, wiggle, and overshoot use linear()?
CSS cubic-bezier can only describe smooth single-segment curves. Physics-style effects with oscillation need many small steps, which the modern CSS linear() function expresses as a list of stops. All modern browsers support it; for older browsers, use the Bézier presets.
Is my work uploaded anywhere?
No. Every curve is computed locally in your browser. Nothing you tweak or copy ever leaves your device.

Related tools