CSS & Design
CSS Animation Generator
Create CSS animations without writing @keyframes from scratch. Choose from preset effects (fade, slide, bounce, spin, pulse, shake) or build a custom keyframe sequence. Control duration, delay, timing function, iteration count, direction, and fill mode. Preview live and copy the CSS.
Runs in your browser
Nothing uploaded
Free, no signup
Ctrl + Enter to run · Recent brings back your last inputs · Everything stays in this browser
FAQ
CSS Animation Generator: questions
What is a CSS animation?
A CSS animation uses @keyframes to define states at different points in time and the animation-* properties to control playback. Unlike transitions, animations can loop, alternate, and run on page load without a trigger.
animation-fill-mode — what does it do?
fill-mode controls the state of the element before and after the animation. "forwards" keeps the end state after the animation finishes. "backwards" applies the start state during the delay period. "both" does both.
CSS Minifier & Beautifier
Compress or format CSS
SVG Optimizer
Minify and clean SVG markup
Website Accessibility Audit
Crawl a page for WCAG risks
CSS Grid Generator
Visual grid layout builder
CSS Flexbox Generator
Build flexbox layouts visually with live preview
SVG to CSS Data URI Encoder
SVG as background-image
Made something with AI? Share it as a private link.
Drop in the HTML from Claude, ChatGPT or any editor and get a link your client can open anywhere — with a password, view tracking, comments and approval.