Spinner
0 / 54
Nothing dropped or approximated
Runs locally
No server, no account and no upload. A headless Chromium on your machine reads the animation.
Matches the browser
Values come from the browser's own animation engine via the Web Animations API, frame by frame.
Keeps real easing
ease, ease-in-out and cubic-bezier() become one
Lottie keyframe with matching bezier handles, not 60 keys a second.
Tells you what it dropped
A report lists every unsupported or approximated feature, such as
box-shadow, filters or gradients.
Live examples: CSS (left) vs Lottie (right)
All 11 animations below were converted by css2lottie v0.1.0 when this site was built. The left side is your browser playing the original CSS; the right side is lottie-web playing the generated JSON. Drag a slider to compare both on the same frame.
Bouncing ball
0 / 60
Nothing dropped or approximated
Pulse
0 / 90
Nothing dropped or approximated
Logo reveal
0 / 84
Nothing dropped or approximated
Loading dots
0 / 72
Nothing dropped or approximated
Checkmark
0 / 54
Nothing dropped or approximated
Card flip
0 / 180
6 report notes
- unsupported
3D perspective: perspective: 600px - unsupported
3D transform-style: transform-style: preserve-3d - approximated
3D transform: 3D transforms are flattened to 2D (no perspective); backface-visibility is respected - approximated
text: "A" converted to shape outlines (not editable text) - approximated
3D transform: 3D transforms are flattened to 2D (no perspective); backface-visibility is respected - approximated
text: "B" converted to shape outlines (not editable text)
Progress bar
0 / 120
Nothing dropped or approximated
Heart beat
0 / 72
Nothing dropped or approximated
Notification bell
0 / 120
1 report note
- approximated
text: "3" converted to shape outlines (not editable text)
Text wave
0 / 72
6 report notes
- approximated
text: "L" converted to shape outlines (not editable text) - approximated
text: "o" converted to shape outlines (not editable text) - approximated
text: "t" converted to shape outlines (not editable text) - approximated
text: "t" converted to shape outlines (not editable text) - approximated
text: "i" converted to shape outlines (not editable text) - approximated
text: "e" converted to shape outlines (not editable text)
Preview any Lottie file
Drop a .json Lottie here, such as one you just made with css2lottie, to play
it with lottie-web. The file stays in your browser and is never uploaded.
Convert your own animation
Conversion needs a real browser engine, so it runs on your computer through the npm package. Requires Node.js 18.17 or newer.
1. Install
npm install --save-dev css2lottie
npx css2lottie install-browser
2. Convert
npx css2lottie input.html -o output.json --report
3. Compare
npx css2lottie input.html --preview
Opens a local page with the CSS and the Lottie side by side and a shared frame scrubber.
Or use the API
import { convertWithReport, formatReport } from "css2lottie";
const { lottie, report } = await convertWithReport({
file: "./animations/logo.html",
width: 400,
height: 400,
});
console.log(formatReport(report));Keep css2lottie free
css2lottie is MIT-licensed and maintained in spare time. If it saves you an After Effects license or a designer round-trip, a coffee helps keep new CSS features coming.
Buy me a coffeeFAQ
How do I convert a CSS animation to Lottie?
Run npx css2lottie animation.html -o animation.json. It loads the page in
headless Chromium, reads every CSS animation, transition and
element.animate() call, and writes Lottie JSON (Bodymovin 5.7+).
Do I need After Effects?
No. css2lottie builds the Lottie file straight from HTML and CSS.
Where does the output play?
In lottie-web, lottie-ios, lottie-android, React Native and Flutter, and on LottieFiles.
Can I convert my own animation on this website?
Not yet. Conversion needs a real browser engine, so it runs on your machine through the npm package or the CLI. This site plays the converted examples and previews any Lottie file you drop into the viewer.
What CSS isn't supported yet?
box-shadow, filters, gradients, clip-path/masks,
stroke-dasharray and JavaScript-driven animation. The
--report flag lists everything that was dropped or approximated. See the
roadmap.