DEV Community

Cover image for 8 tools to help with CSS
Kalimah Apps
Kalimah Apps

Posted on

8 tools to help with CSS

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. 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.

Top comments (8)

swagwik profile image
Sattwik Sahu

Wow that's like getting frontend Paradise in one article! You should try creating a website where you deploy all that code πŸ‘πŸ‘πŸ‘

kalimahapps profile image
Kalimah Apps

Thanks. I might do it one day. Currently most of projects are available on my codepen profile

mycodemagic profile image

Awesome buddy all in one πŸ‘ŒπŸ˜Žβ˜ΊοΈ

thuangempage profile image

Very useful

htmlentities profile image
Html Entities

Very helpful πŸ‘πŸ‘Œ

brandonwallace profile image

Very nice! Thanks for this post.

oliverleitner profile image
Oliver Leitner

thats quite a nice roundup and extending to what your fav code editor and your fav webbrowser already are offering=)