CSS Transition Generator - Free Online CSS Tool | IconVault
Create smooth CSS transitions visually: pick a property, duration, delay and easing, design custom cubic-bezier curves, preview on hover. Free, in-browser.
CSS Transition Generator
Design buttery CSS transitions with a bezier curve editor
Timing function
Demo trigger
5 of 5 free copies left.
Hover the box to play the transition
CSS output
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms;
About this tool
IconVault's CSS Transition Generator builds buttery CSS transitions with a visual editor. Choose the property to animate, set duration and delay, pick a timing function from presets like ease and ease-in-out, or draw your own cubic-bezier curve with sliders for Spring, Overshoot, Smooth and Snap feels. A live demo shows exactly how your transition behaves on hover or click before you ship it.
Everything runs 100% in your browser with no sign-up and nothing uploaded. Copy the finished transition line in one click, reuse it for buttons, menus, cards and modals, and tweak the curve until the motion feels right. It is free to use and the output is plain, standards-based CSS that works in every modern browser.
Frequently asked questions
Popular searches
More tools
Code Playground
Write HTML, CSS & JS with live preview.
JSON Formatter
Beautify, validate & minify JSON.
Base64 Encoder
Encode & decode text and files.
JWT Decoder
Inspect tokens without sending them anywhere.
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon