While CSS is not a complicated language, some parts of it were a mystery to me when I started learning it. For example combining multiple box-shadow or background-image attributes. That's why I designed these playgrounds to make working with CSS easier and more productive.

Here are the 8 playgrounds you can use to improve CSS productivity.

1- Cursor property

Starting with an easy one. You can check out the different values for the cursor property. Hover on each box and see what the cursor would look like in your browser.

2- Filter property playground

This playground helps visualizing what different filter values do. You can stack different filters, modify their values and get the CSS code ready to be used.

3- Transform property playground

Demystify another CSS property. Since each value affect the subsequent transforms values, this CSS property could be confusing to manage. With this playground you can add a stack of transforms, set transform-origin and get the CSS code.

4- Box shadow generator

Using shadows in your design is a great option, if done properly. This what the box shadow generator does. You can add a stack of box shadows then get the generated CSS.

5- :nth-selector

CSS provide great selector options to target specific elements. This is the case with :nth-selectors (nth-child and nth-of-type). While they are extremely useful in many cases, their use is somewhat hard to figure out.

http://nthmaster.com/ website provide great examples on how to use them, the visuals however are not that good. Use this pen to see how different selectors work live.

6 - Border radius generator

border-radius property is not difficult to grasp at first. But once 8 values are used instead of 4 it might be confusing.
Not sure what I am talking about?! Check out this pen and disable simple mode.

7- Gradient generator

There are no shortages of gradient generators, but none a one stop gradient generator. Some lack a good user interface or don't provide enough options.

This tool provides an intuitive and a "complete" generator. It has 500+ presets and you can control almost all gradient aspects such colors, size, shape, type and even stack multiple gradients.

Make sure you click on info button to get more information about the tool and how to use it.

8- Palette generator

This tool does not generate values for a CSS property but rather a complementary tool to assets with color combination.

This generator resolves the shortcomings of available palette generators. It has a nice user interface with live view of color combination. It also includes a color theory section to help designers understand how color matching works.

It also provides a set of keyboard/mouse shortcuts to make the process as seamless and easy as passible.