CSS Shape Generator

Introducing CSS Shape Generator…

css-shape-generatorDraw pure HTML / CSS drawings from basic shapes: introducing CSS Shape Generator… Demo here if you don’t like to read.

A drawing is often better that a long speech, so here are a couple of pure CSS / HTML drawings:

Interesting features

Everything in the URL: All the data is stored in the URL, so each possible drawing is associated to an URL. This features allows you to

  • save you drawing with the browser’s bookmarks system,
  • undo / redo changes with the browser’s back / next buttons,
  • send the drawing to a co-worker or a friend: copy / paste the URL.

As an example of this feature, the drawing above are links, so you can click them to see how they look in the editor and edit them.

The editor supports: color selection, drag & drop interface, send to back, bring to front.

HTML of HTML + CSS generation: As you draw, the output is updated, and you can copy paste either standalone HTML with inline style, or HTML + CSS, depending on the situation.


Please visit the demo here: Happy drawing

Disclaimer: this is a beta. Depending on the feedback I will improve it. Also, please use a recent browser.

  1. This is a nice tool to make draws. It will help a lot those who wants to do a quick illustration.
    As a designer I wish to be able to make the arrangement more than “back” or “front” only. In colors, a tab with predefined colors will facilitate their selection.

    That’s my considerations and congratulations, because this is an amazing tool.

  2. Very cool. Is there any possibility that we could in the future be able to cut bits out of shapes? If you use Adobe Illustrator, I’m thinking of a function similar to “Minus Front” in the pathfinder box.

  3. What an amazing tool!

    I do have a little question though? I’ve created a simple drawing:


    And then I’ve copied and pasted the resulting code to a new HTML document.

    When using inline CSS, it works perfectly, however the HTML+CSS version (which you could transfer to a project) renders oddly, like this:


    Is there anything special I need to do to get it working in this manner? Thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *