Coders HubCoders Hub

CSS Cubic-Bézier & Spring Physics Studio

Shape easing curves and physical springs with live animation previews.

Support
Works Offline
Privacy First
No Login
No API

About the CSS Cubic-Bézier & Spring Physics Studio

Design CSS cubic-bezier timing functions by dragging control points or entering exact coordinates. Compare your motion against linear easing with slide, scale, rotate, pop and fade previews. Switch to spring physics to tune mass, stiffness, damping and initial velocity, inspect overshoot and settling time, and export CSS, sampled keyframes, Tailwind, JavaScript/Motion and native animation snippets. All calculations run locally in your browser.

Popular uses

  • cubic bezier generator
  • css easing editor
  • spring animation
  • animation timing function
  • bounce easing
  • tailwind easing
  • framer motion spring
  • swiftui spring

Examples

Overshoot easing

0.34, 1.56, 0.64, 1

Output

cubic-bezier(0.34, 1.56, 0.64, 1)

Critical spring

mass 1, stiffness 100, damping 20, velocity 0

Output

Critical damping: ratio 1, no overshoot

Keyboard shortcuts

  • Copy the main outputCtrl / ⌘ + Shift + C
  • Download the resultCtrl / ⌘ + S
  • Share this toolCtrl / ⌘ + Shift + S
  • Reset the inputsAlt + R
  • Open the tool search paletteCtrl / ⌘ + K

Related tools

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Transform Playground

HTML & CSS

Combine translate, rotate, scale, and skew with a live preview.

HTML Viewer with CSS & JS Tabs (Live Preview)

HTML & CSS

Edit HTML, CSS, and JS in tabs with an instant sandboxed live preview.

SVG Wave Generator

HTML & CSS

Generate parametric SVG wave shapes for sections.

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Frequently asked questions

Read more

Version 1.0.0 · Updated 2026-10-23 · Runs entirely in your browser