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.

Toolkit supports:

- 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
- Borders
- 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 with a single click

Toolkit is optimised for Yosemite and retina displays but also works great on Mavericks too

What’s New

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

Ratings and Reviews

3.7 out of 5
6 Ratings
6 Ratings
nDimensions ,


While exploring the application, I deleted the animations. There is no way to restore them. I uninstalled and re-installed the app and that also did not work.

ComicBook ,

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.

andrew_andrew ,

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.


moople apps
1.1 MB
OS X 10.7 or later, 64-bit processor
Age Rating
Rated 4+
© Moople 2014


  • Family Sharing

    With Family Sharing set up, up to six family members can use this app.

More By This Developer