What are overshoot easings like ease-out-back?

Overshoot easings (back, elastic) have y-values outside 0-1, causing the animation to temporarily exceed its final state before settling. Ease-out-back creates a slight bounce past the target. Use sparingly for playful UI elements, but avoid for serious or professional interfaces.

Performance impact of different easing functions?

Standard CSS easings are hardware-accelerated and perform identically. Complex cubic-bezier curves have negligible performance impact on modern browsers. The main performance concern is what you animate: stick to transform and opacity. Avoid animating layout properties like width, height, or margin.

How do easing functions work with CSS keyframes?

In CSS @keyframes, the timing function applies between each keyframe, not across the entire animation. Use animation-timing-function to set the default, or specify timing per-keyframe. For complex multi-step animations, you may need different easings between different keyframes.

Are these easings compatible with all browsers?

Yes, cubic-bezier timing functions are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. They work with CSS transitions, CSS animations, and JavaScript animation APIs. The values are standard CSS and framework-agnostic, working with React, Vue, Angular, and vanilla JS.

What are CSS easing functions?

CSS easing functions are timing functions that control how an animation progresses over time. They define the acceleration curve: whether an animation starts slow and speeds up (ease-in), starts fast and slows down (ease-out), or combines both (ease-in-out). These functions create natural, smooth motion that enhances user experience.

What is a cubic-bezier curve?

A cubic-bezier curve is a mathematical function defined by four control points that creates smooth curves. In CSS, it's written as cubic-bezier(x1, y1, x2, y2) where x values represent time (0-1) and y values represent progression. This allows precise control over animation acceleration and deceleration patterns. Each plot above draws the two control points as handles.

Difference between ease-in, ease-out, ease-in-out?

Ease-in animations start slowly and accelerate, creating anticipation before action. Ease-out animations start quickly and decelerate, providing immediate response with gentle settling. Ease-in-out combines both, starting and ending slowly with acceleration in the middle, creating the most natural motion for UI interactions.

What is linear easing?

Linear easing maintains constant speed throughout the animation with no acceleration or deceleration. It's defined as cubic-bezier(0, 0, 1, 1). Use it for progress bars, loading indicators, or any animation that should feel mechanical and consistent rather than natural.

Which easing function should I use for buttons?

Use ease-out for button hover and click states. It provides immediate visual feedback (fast start) with a gentle settling effect (slow end). For button press animations, ease-out-cubic or ease-out-quart work well. Avoid ease-in for interactions as the delayed start feels unresponsive.

Best easing for modal and dialog animations?

Use ease-out for modal entrance (immediate appearance, gentle settle) and ease-in for exit (gentle start, quick disappear). For backdrop fades, ease-in-out works well. Duration should be 200-300ms for modals to feel responsive without being jarring.

What animation duration should I use?

Use 100-200ms for micro-interactions (hover, focus), 200-300ms for UI state changes (modals, dropdowns), 300-500ms for layout transitions, and 500-800ms for page transitions. Faster is usually better: if in doubt, make it shorter. Always test on mobile devices, and respect prefers-reduced-motion.

How to create smooth, professional animations?

Match easing to purpose: ease-out for entrances and interactions, ease-in for exits, ease-in-out for state changes. Keep durations short (under 300ms for most UI). Animate transform and opacity for best performance. Use consistent timing across your app for a cohesive feel.

How to use easing functions in Tailwind CSS?

Tailwind provides built-in easing classes: ease-linear, ease-in, ease-out, and ease-in-out (Tailwind's own curves, slightly sharper than the CSS keywords of the same name). For custom curves, use arbitrary values: "ease-[cubic-bezier(0.4,0,0.2,1)]". In Tailwind v4, add reusable easings as --ease-* variables in your @theme block (v3 used transitionTimingFunction in tailwind.config.js).

How to copy easing values from this visualizer?

Every curve shows its CSS value (cubic-bezier(x1, y1, x2, y2)) and its Tailwind class, each with a copy button. "Copy @theme" copies all 24 named curves at once as Tailwind v4 theme variables, so ease-in-out-cubic and the rest become classes in your project.

How to use easings in React and Framer Motion?

In Framer Motion (now Motion), pass easing arrays to the transition prop: transition={{ ease: [0.4, 0, 0.2, 1] }}. You can also use named easings like "easeInOut" or create custom cubic-bezier arrays. The four numbers in each curve here work as-is in both CSS and JavaScript animation libraries.

Can I use custom cubic-bezier values in Tailwind?

Yes, Tailwind supports arbitrary values using square bracket notation: "ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]". For reusable custom easings in Tailwind v4, define them in @theme (--ease-snappy: cubic-bezier(...)) and use ease-snappy throughout your project.

CSS Easing Functions Visualizer.

Explore and visualize CSS easing functions with real-time animation preview. Copy cubic-bezier curves instantly for Tailwind, React, and CSS projects.29 curves8 families3 motions

Get Pro Browse curves

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP

Visualizer

Every curve, in motion

The five CSS keywords, then 8 classic families (sine to back) in, out and in-out. Each plot draws its control points; the dot and the block move with the curve.

Filter

Motion

Duration

29 curves. Press Play to see one move.

linear
Keyword · Linear
CSS
cubic-bezier(0, 0, 1, 1)
Tailwind
ease-[cubic-bezier(0,0,1,1)]
ease
Keyword · In-Out
CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Tailwind
ease-[cubic-bezier(0.25,0.1,0.25,1)]
ease-in
Keyword · In
CSS
cubic-bezier(0.42, 0, 1, 1)
Tailwind
ease-[cubic-bezier(0.42,0,1,1)]
ease-out
Keyword · Out
CSS
cubic-bezier(0, 0, 0.58, 1)
Tailwind
ease-[cubic-bezier(0,0,0.58,1)]
ease-in-out
Keyword · In-Out
CSS
cubic-bezier(0.42, 0, 0.58, 1)
Tailwind
ease-[cubic-bezier(0.42,0,0.58,1)]
ease-in-sine
Sine · In
CSS
cubic-bezier(0.12, 0, 0.39, 0)
Tailwind
ease-[cubic-bezier(0.12,0,0.39,0)]
ease-out-sine
Sine · Out
CSS
cubic-bezier(0.61, 1, 0.88, 1)
Tailwind
ease-[cubic-bezier(0.61,1,0.88,1)]
ease-in-out-sine
Sine · In-Out
CSS
cubic-bezier(0.37, 0, 0.63, 1)
Tailwind
ease-[cubic-bezier(0.37,0,0.63,1)]
ease-in-quad
Quad · In
CSS
cubic-bezier(0.11, 0, 0.5, 0)
Tailwind
ease-[cubic-bezier(0.11,0,0.5,0)]
ease-out-quad
Quad · Out
CSS
cubic-bezier(0.5, 1, 0.89, 1)
Tailwind
ease-[cubic-bezier(0.5,1,0.89,1)]
ease-in-out-quad
Quad · In-Out
CSS
cubic-bezier(0.45, 0, 0.55, 1)
Tailwind
ease-[cubic-bezier(0.45,0,0.55,1)]
ease-in-cubic
Cubic · In
CSS
cubic-bezier(0.32, 0, 0.67, 0)
Tailwind
ease-[cubic-bezier(0.32,0,0.67,0)]
ease-out-cubic
Cubic · Out
CSS
cubic-bezier(0.33, 1, 0.68, 1)
Tailwind
ease-[cubic-bezier(0.33,1,0.68,1)]
ease-in-out-cubic
Cubic · In-Out
CSS
cubic-bezier(0.65, 0, 0.35, 1)
Tailwind
ease-[cubic-bezier(0.65,0,0.35,1)]
ease-in-quart
Quart · In
CSS
cubic-bezier(0.5, 0, 0.75, 0)
Tailwind
ease-[cubic-bezier(0.5,0,0.75,0)]
ease-out-quart
Quart · Out
CSS
cubic-bezier(0.25, 1, 0.5, 1)
Tailwind
ease-[cubic-bezier(0.25,1,0.5,1)]
ease-in-out-quart
Quart · In-Out
CSS
cubic-bezier(0.76, 0, 0.24, 1)
Tailwind
ease-[cubic-bezier(0.76,0,0.24,1)]
ease-in-quint
Quint · In
CSS
cubic-bezier(0.64, 0, 0.78, 0)
Tailwind
ease-[cubic-bezier(0.64,0,0.78,0)]
ease-out-quint
Quint · Out
CSS
cubic-bezier(0.22, 1, 0.36, 1)
Tailwind
ease-[cubic-bezier(0.22,1,0.36,1)]
ease-in-out-quint
Quint · In-Out
CSS
cubic-bezier(0.83, 0, 0.17, 1)
Tailwind
ease-[cubic-bezier(0.83,0,0.17,1)]
ease-in-expo
Expo · In
CSS
cubic-bezier(0.7, 0, 0.84, 0)
Tailwind
ease-[cubic-bezier(0.7,0,0.84,0)]
ease-out-expo
Expo · Out
CSS
cubic-bezier(0.16, 1, 0.3, 1)
Tailwind
ease-[cubic-bezier(0.16,1,0.3,1)]
ease-in-out-expo
Expo · In-Out
CSS
cubic-bezier(0.87, 0, 0.13, 1)
Tailwind
ease-[cubic-bezier(0.87,0,0.13,1)]
ease-in-circ
Circ · In
CSS
cubic-bezier(0.55, 0, 1, 0.45)
Tailwind
ease-[cubic-bezier(0.55,0,1,0.45)]
ease-out-circ
Circ · Out
CSS
cubic-bezier(0, 0.55, 0.45, 1)
Tailwind
ease-[cubic-bezier(0,0.55,0.45,1)]
ease-in-out-circ
Circ · In-Out
CSS
cubic-bezier(0.85, 0, 0.15, 1)
Tailwind
ease-[cubic-bezier(0.85,0,0.15,1)]
ease-in-back
Back · In
CSS
cubic-bezier(0.36, 0, 0.66, -0.56)
Tailwind
ease-[cubic-bezier(0.36,0,0.66,-0.56)]
ease-out-back
Back · Out
CSS
cubic-bezier(0.34, 1.56, 0.64, 1)
Tailwind
ease-[cubic-bezier(0.34,1.56,0.64,1)]
ease-in-out-back
Back · In-Out
CSS
cubic-bezier(0.68, -0.6, 0.32, 1.6)
Tailwind
ease-[cubic-bezier(0.68,-0.6,0.32,1.6)]

Found your timing? With Pro, your AI agent builds animated blocks and templates with it, from a prompt.

Get Pro

How it works

How to use an easing

Learn how to implement smooth animations with Tailwind CSS easing classes.

Choose an easing function
Browse the interactive grid to find the perfect easing curve for your animation.
Preview the animation
Watch the real-time animation preview to see how the easing affects motion.
Copy the class
Copy the curve's Tailwind CSS cubic-bezier class, or its CSS value.
Apply to your project
Use the copied class in your Tailwind CSS animations and transitions.

Pricing

Build it with Pro

The visualizer is free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds the motion for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billing

Billed once a year in USD. Cancel anytime.

How many people can use the license.
Client work, SaaS products and anything you charge for.
Production-ready React sections: hero, pricing, features, dashboards and more.
Complete multi-page sites you can ship as they are.
React icons from every major library, installable with one command.
Presets that restyle every block, in light and dark.
Lets your AI editor search, preview and install blocks for you.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Basic usage
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Unlimited usage
Support: Priority

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

How many people can use the license.Seats: 1 seat
Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
Complete multi-page sites you can ship as they are.Templates: All 14 templates
React icons from every major library, installable with one command.React icons: 294k+ icons
Presets that restyle every block, in light and dark.Themes: All 59 themes
Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
Priority requests are answered first.Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

How many people can use the license.Seats: Unlimited seats
Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage

Secure checkout via Stripe
Code lives in your repo
Keep what you've shipped if you cancel
License terms

FAQ

Frequently asked questions

Find answers to frequently asked questions about CSS easing functions, cubic-bezier curves, animation timing, and implementation best practices.

Your motion, built for you

Every block, template and icon, installed by your AI agent in your theme. The visualizer stays free.

Get Pro

CSS Easing Functions Visualizer.

Every curve, in motion

linear

ease

ease-in

ease-out

ease-in-out

ease-in-sine

ease-out-sine

ease-in-out-sine

ease-in-quad

ease-out-quad

ease-in-out-quad

ease-in-cubic

ease-out-cubic

ease-in-out-cubic

ease-in-quart

ease-out-quart

ease-in-out-quart

ease-in-quint

ease-out-quint

ease-in-out-quint

ease-in-expo

ease-out-expo

ease-in-out-expo

ease-in-circ

ease-out-circ

ease-in-out-circ

ease-in-back

ease-out-back

ease-in-out-back

How to use an easing

Choose an easing function

Preview the animation

Copy the class

Apply to your project

Build it with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

What are CSS easing functions?

What is a cubic-bezier curve?

Difference between ease-in, ease-out, ease-in-out?

What is linear easing?

How to use easing functions in Tailwind CSS?

How to copy easing values from this visualizer?

How to use easings in React and Framer Motion?

Can I use custom cubic-bezier values in Tailwind?

Which easing function should I use for buttons?

Best easing for modal and dialog animations?

What animation duration should I use?

How to create smooth, professional animations?

What are overshoot easings like ease-out-back?

Performance impact of different easing functions?

How do easing functions work with CSS keyframes?

Are these easings compatible with all browsers?

Your motion, built for you