CSS Animation Generator

12 tools

Build @keyframes animations visually.

Runs in your browser — your files and text stay on your device

Design Flexbox and Grid layouts, shadows, animations, easing curves, filters, and glassmorphism effects with live controls and a live preview instead of guessing values by hand — copy the generated CSS straight into your stylesheet.

Flexbox Playground Grid Generator Box Shadow Text Shadow Border Radius Clip Path Glassmorphism Animation Easing Curve Filter Fluid Typography Unit Converter

Duration (1s)Repeat

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.element {
  animation: bounce 1s ease infinite;
}

How to use this tool

1Pick an animation preset, then adjust duration and repeat count.
2Watch the live preview box animate.
3Copy the full CSS — both the @keyframes block and the animation property.

Frequently asked questions

Can I combine multiple animations?

Yes — CSS supports comma-separating multiple animation names/values on the same element. Copy two presets' @keyframes blocks and combine the animation property manually.

Is this generated on a server?

No — the preview and CSS are computed entirely in your browser.

Guides

All guides →