Easing Function Visualizer
Visualize, compare, and generate CSS easing functions with an interactive SVG cubic-bezier curve editor. Drag the two control points (P1, P2) on the curve to craft your own custom easing - or choose from 18+ built-in presets including ease, bounce, elastic, back, and Material Design's emphasized curve. Compare up to 6 easing curves side-by-side in the comparison overlay, preview the motion with an animated dot, and copy the production-ready CSS for both transition and animation properties. All processing runs locally in your browser - completely free, no signup required.
Control Points
transition: all 0.4s ease;
animation: myAnim 0.4s ease;
18+ Easing Presets
Browse 18 built-in easing functions - from CSS keywords (ease, ease-in, ease-out) to advanced curves (back, bounce, elastic, emphasized). Each preset includes a visual curve preview and a plain-English description of its motion character.
Interactive Curve Editor
Drag the two control points on the SVG curve editor to craft your own cubic-bezier() function. Real-time feedback shows the curve updating as you drag, with live coordinate readouts for precise control.
One-Click CSS Copy
Copy the cubic-bezier() value, transition shorthand, or animation shorthand with one click. The generated CSS is production-ready with properly formatted values.
Preset Comparison & Motion Preview
Compare up to 4 easing curves overlaid on a single chart and see how they differ. Animate a dot along any curve to preview the motion feel before writing any CSS.
Frontend Development
Choose the perfect easing function for hover effects, modals, page transitions, and micro-interactions. Visualise each curve to understand how your animation will feel before writing any code.
UI/UX Prototyping
Design natural-feeling interactions by picking the right easing curve. Compare multiple easings side-by-side to find the perfect match for your interface's personality.
Animation Design
Create custom cubic-bezier curves for branded motion design. Drag control points to craft unique easings that become part of your design system's motion language.
Design System Tokens
Define standardised easing tokens for your design system. Use the CSS output directly in your component library - consistent motion across every interaction.
Game & Interactive UI
Game UIs demand snappy, responsive motion. Bounce, back, and elastic easings add character to scores, menus, and notifications without writing complex JavaScript.
Educational Content
Teach and learn how CSS easing functions work visually. The interactive curve editor makes abstract cubic-bezier mathematics concrete and intuitive.
What Are CSS Easing Functions?
CSS easing functions control the rate of change during an animation or transition. Instead of a boring constant-speed animation, easing makes motion feel natural - accelerating, decelerating, bouncing, or overshooting. The most common type is cubic-bezier(), defined by two control points (P1, P2) that shape the curve from start (0,0) to end (1,1).
How the Curve Editor Works
The interactive SVG editor lets you drag two control points on a coordinate grid. The X-axis represents time (0% to 100% of the animation duration), and the Y-axis represents progress (0% to 100% of the property change). The curve shape between these points determines the easing: steep sections mean fast change, flat sections mean slow change.
Understanding Control Point Positions
P1 (first handle) controls the initial acceleration; P2 (second handle) controls the final deceleration. P1 near the bottom-right creates a slow start that accelerates. P2 near the top-right creates a fast start that slows down. Values outside the 0-1 range (like y1=-0.5) create overshoot effects like bouncing or springing.
Easing vs. Duration vs. Delay
Easing, duration, and delay are independent animation properties. Duration controls how long the animation runs. Delay controls when it starts. Easing controls the pacing of motion within that duration. A fast duration with a dramatic easing creates snappy, lively motion. A slow duration with gentle easing creates smooth, elegant transitions.
CSS Animation Generator
Build CSS @keyframe animations with timing, easing, direction, and fill-mode controls. Preview live and copy ready-to-use CSS.
Transition Generator
CSS transition builder with property, duration, timing-function, and delay controls. Preview with hover trigger and copy the CSS.
Scroll Animation Preview
Preview CSS scroll-driven animations with fade-in, slide-up, scale, and blur effects. Copy the CSS + JS code for your project.
Box Shadow Generator
Interactive CSS box-shadow builder with X/Y offset, blur, spread, color, and inset controls. Multiple shadow layers supported.
A CSS easing function defines the rate of change of a property over time during an animation or transition. Instead of moving at constant speed, easing allows animation to accelerate, decelerate, bounce, or overshoot. The most common type is cubic-bezier(), defined by four values representing two control points that shape the easing curve.
A cubic-bezier curve has four parameters: x1, y1, x2, y2. P1 (x1, y1) controls how the animation starts - it determines the initial acceleration. P2 (x2, y2) controls how the animation ends - it determines the final deceleration. Both points sit on a coordinate grid where X = time (0 to 1) and Y = progress (0 to 1).
When a control point Y value goes below 0 or above 1, the curve overshoots - meaning the animated property temporarily goes beyond its final value (or before its initial value). This creates bounce and spring effects. For example, Back In starts by going slightly backward before moving forward (y1 < 0).
Ease-in starts slow and accelerates - good for elements entering the screen. Ease-out starts fast and decelerates - good for elements leaving the screen. Ease (the default) combines both: a gentle start and gentle end with a slightly faster middle section. It works well for most UI transitions.
Use the cubic-bezier() function in your transition or animation property: transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. The four values are x1, y1, x2, y2. You can drag the control points in this tool to find the perfect curve and copy the resulting CSS value.
Cubic-bezier() creates smooth, continuous motion - the property value changes gradually over time. Steps() creates discrete jumps - the property stays at one value for a fixed time, then snaps to the next value. Steps are useful for typewriter effects, sprite animations, and frame-by-frame sequences.
Yes. Use arbitrary values in Tailwind: transition-[cubic-bezier(0.68,-0.55,0.27,1.55)] or add custom easings to your tailwind.config.js under theme.extend.transitionTimingFunction.
For most UI interactions (hover states, modals, tooltips), ease-out is recommended - objects that start fast and slow down feel responsive and natural. For entrance animations, use ease-in-out or the Material Design emphasized curve (cubic-bezier(0.2, 0, 0, 1)). Avoid linear for UI - it feels robotic.
Yes - cubic-bezier() and keyword easings (ease, ease-in, ease-out, ease-in-out, linear) are supported in all modern browsers. Steps() is also widely supported. The CSS transition and animation properties have been stable across Chrome, Firefox, Safari, and Edge for many years.