Hi! My name is Mitch, and Keyframes is a side project I've been building and using almost daily for a few years now. It's a toolbox for designers and developers to help with some of the more annoying aspects of CSS.

It started as just an experiment ~4 years ago, then I released a fairly polished version publicly ~2 years ago as an excuse to learn Vue. A few months ago I realized I hadn't touched the code in over a year, and decided it was time for a complete rewrite to fix my early Vue mistakes, redesign the UI, and add a bunch of new features I've been thinking of for a year.

The tools on @keyframes are some of the things I use most frequently, so I wanted to build them the way I thought they should be. My goal was to create simple tools that are private, local, customizable, and easy to use, without all the annoying junk like massive ads, popups, invasive tracking, or forced social media integration.

👾 CSS @Keyframe Animation Editor A tool that gives you a timeline (like movie editing software) to easily create and preview CSS animations.

❐ Box-Shadow generator Simply move some sliders to adjust your shadow, add multiple layers, then get the CSS.

🎨 Colors Create & convert colors, create color palettes, view color contrast and colorblindness, create gradients, and share your palettes.

⌨️ Character codes Search for and easily copy special character CSS and HTML values.

👋 What makes it stand out: • It's free - all features. • It's private & local - Keyframes only uses Local Storage, and there are no 3rd party trackers or ad networks. It's also open source, so you can verify. • The UI is customizable - the theme, font, borders, and behaviors like confirmation dialogues and tooltips can be disabled. • Created from scratch - no frontend frameworks or 3rd-party libraries let me get everything just how I wanted it.

So if you're a developer or designer who works with CSS a lot, I hope these tools can be useful and save you some time. I'll be adding more tools over the coming weeks - so keep an eye out!

I'd love to hear any questions, suggestions, ideas for other tools, criticism, or anything else you have to say!