Build CSS keyframe animations visually
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.animated {
animation: bounce 0.6s ease infinite;
}Creating CSS animations by hand means juggling keyframe percentages, timing functions, and iteration counts. Our free visual generator lets you build animations step by step, preview them in real time, and export clean @keyframes CSS — no JavaScript libraries, no bloat.
Start building your animation — preview live and copy the CSS when you're done.
Count words, characters, sentences & reading time
Convert text between upper, lower, title, camel case & more
Test your typing speed with WPM & accuracy tracking
Generate placeholder text for designs & layouts
Remove extra spaces, blank lines & special characters
Sort, reverse, shuffle & deduplicate lines
Convert text to URL-friendly slug format
Compress images with adjustable quality
Convert between PNG, JPEG, WebP, AVIF & PDF
Resize images with aspect ratio lock
Encode images to Base64 data URI
Generate multi-size favicons from any image
WordPress-optimized favicon generator
WordPress-optimized image compression
Minify & clean SVG code
Convert SVG to PNG with custom scaling
Convert between TTF, OTF, WOFF, WOFF2 & EOT
Convert between CSV and JSON formats
Convert between JSON and YAML formats
Encode & decode Base64 strings
Encode & decode HTML entities
Encode & decode URL components
Convert between binary, octal, decimal & hex
Visual CSS Grid builder with live preview
Interactive Flexbox property explorer
Convert CSS properties to Tailwind classes
Generate harmonious typography scales
Build CSS keyframe animations visually
Create & preview cubic-bezier easing curves
Preview CSS transform combinations
Style custom scrollbars with live preview
Color picker, contrast checker & palette generator
Generate accessible focus-visible ring styles
Minify HTML, CSS & JavaScript code
Format, validate & beautify JSON data
Format & beautify SQL queries
Decode & inspect JWT tokens
Test regular expressions with live highlighting
Build & explain cron expressions visually
Quick Elementor widget CSS snippet generator
Generate v4 UUIDs in bulk
Generate strong random passwords
Generate SHA-256 & SHA-512 hashes
Detect what any website is built with
Scan a site's sitemap & pages for broken links
48 Tools — Built for developers, by developers