CSS Art Tools

CSS Art Tools can be used to create css art shapes and prototyping css components. It supports a lot of css properties, border radius, all types of gradients, clip path, lots of box shadows, borders and transform properties.

It also supports adding unlimited number of parents for each div, so you an wrap all your divs in a single parent to maintain the structure of your project.

css tools landing page

The Tech Stack

I have used React to build this app because of the way I can componentize my app. I have also used Redux as a state managment system to handle the nested state of the app.

The Playground

csstools playground page

Here where all the magic happen, the user can drag the div anywhere in the playground and build up his shapes.

I really managed to come up with the best UX where the user can adjust css properties through HTML inputs or custom input components for each css property, this required handling a lot of mouse and touch events. So the user can easily set a border radius, set a clip path and gradients.

The Layer system

One of the advantages of csstools that the user can add unlimited number of nested div elements, so the shapes can be relative to each other. In order to build this layer system I had to build a recursive React Component, this sounded wierd at the begining, but React Components are just functions so why not building a recursive one.

Generating The Code

Generating the code for the css shape was the last step in this project. Because of the datamodel I set for the app. It wasn't hard to create a recursive function that expects the current redux store as an arg to generate the code.

csstools code page