Easing Curve Visualizer
Compare cubic-bezier easing curves with a live animated dot preview, then copy the exact CSS timing value or a Svelte transition snippet. Free, no signup.
Free, no signup needed. Runs 100% in your browser.
Loading…
How to use this tool
- Enter four cubic-bezier values or pick a preset.
- Watch the curve and the animated dot.
- Copy the CSS value or the Svelte snippet.
Frequently asked questions
What values can I use?
X values must stay between 0 and 1. Y values can go above 1 for springy overshoot effects up to 1.5 here.
How do I use this in Svelte?
Copy the fly snippet and replace the placeholder easing with a cubic-bezier helper that matches your four values.
Is it free?
Yes, free with no signup.
Related tools
Need a website for this?
Describe your idea once and BYOB plans, builds, and deploys your site.
Embed this tool
Paste this snippet to show this tool on your own site.