Free, local and no login

Tailwind CSS animation generator

Design motion on a visual canvas and export it for Tailwind CSS. MotionCraft turns your animation into reusable keyframes and animation utilities.

Create an animation

Try it right here

A working example with the exact code it produces. Copy it, or open it in the editor and change anything.

Edit this animation All formats
animation.css
/* Tailwind v4 — import this from your main CSS, after @import "tailwindcss";
   Interaction states are utilities, so paste these onto your elements:
     <div class="transition-[transform,box-shadow,background-color] duration-[180ms] ease-out hover:translate-y-[133px] hover:bg-[#7c6cff] hover:shadow-[0px_10px_24px_0px_#6366f166] active:translate-y-[136px] active:shadow-[0px_2px_6px_0px_#00000040] active:duration-[90ms]"></div>
*/

Why it is built this way

This is a transition on :hover, not a keyframe animation — the difference matters. Keyframes run on a fixed schedule; a transition follows the pointer, so it reverses cleanly when someone hovers away halfway through. The press state uses a shorter duration than the release, which is what makes a button feel responsive rather than mushy.

More ready-made animations

Browse all animations →

Card title

Supporting copy goes here.

Card Hover Lift

A card that rises and deepens its shadow on hover. Pure CSS transition.

Button Press Animation

A tactile scale-down on click with a quick, snappy release.

Accessible Focus Ring

A keyboard-only focus ring using :focus-visible, so mouse clicks stay clean.

What you can do

Create custom Tailwind keyframes without manual configuration

Prototype micro-interactions before coding them

Export reusable animation utilities for a design system

How it works

  1. 01

    Design the animation in the visual studio.

  2. 02

    Select the Tailwind export format.

  3. 03

    Paste the generated keyframes and utility into your Tailwind setup.

Frequently asked questions

Does MotionCraft export Tailwind code?

Yes. Tailwind is one of the supported export formats alongside CSS and framework-specific output.

Can I preview before exporting?

Yes. The canvas and timeline provide an in-browser preview before you copy the code.

Open MotionCraft