Open the Mac App Store to buy and download apps.
CSS Toolkit lets you visually create stunning CSS styles and animations without touching a line of code.
Through it's simple and intuitive interface, CSS Toolkit can create incredibly complex CSS styles that would take hours by hand.
- Border Radius (with individually controllable sides)
- Multiple Gradients (Radial and Linear) with the ability to reorder as you design
- Box Shadows (Inner and Outer) with the ability to reorder as you design
- Typographic style including text-shadow
- CSS Transforms for rotation and scale
- CSS keyframe animation for scale, translate, rotate and skew with custom easing functions for incredibly smooth and lively interactions
Production ready code is generated for you as you design, and we currently support vanilla CSS or Compass (for handling prefixing etc)
You can even share your creations on http://codepen.io with a single click
Toolkit is optimised for Yosemite and retina displays but also works great on Mavericks too
What's New in Version 1.1
Added steppers in textfields
Fixed color picker crash
Fixed graphics bugs in background blur view
Small fix in segmented control on text panel
Easy to use, great results, clean css output
The other reviewer mentions vendor prefixes but to that I say use autoprefixer. The only reason I rated it 4 instead of 5 is I would of liked to see more integration points in the application. Hooks if you will so it could be used from command line, hooked into a tool chain for ci, etc, and possibly be used in combination with stylus and or less. It just needs a bit more flexibility for me but seriously? who else would need that? So its a solid 4.
Handy app, but it would be great if it also produced vender prefix’s. Would be really super if it produced up to date prefix’s by referencing caniuse.
CSS Toolkit is like a color picker that learned the rest of CSS
You can think of CSS Toolkit as a color picker, but instead of just colors it also has transforms and animations and border-radius and so on. The process is the same, though: you manipulate sliders and enter values and see a visual result, and when you are happy with that visual result, you get back some code to put in your CSS stylesheet. Instead of just a color code, though, here you will get colors plus everything else that applies to an element. In the same way that using a color picker gives more-creative results than just typing “#FF0000,” using CSS Toolkit to make an animation is going to give you much more creative animations.
The output is CSS, which by definition does not include vendor prefixes. If you want to add vendor prefixes, that problem is solved by any one of many tools, depending on your needs and goals and tools. I use prefix.js, myself. What CSS Toolkit solves is the problem of making creative CSS rules that have artistic and design value without it being a chore or taking forever or forcing you into some giant animation framework that you don’t want to use.