CSS Shape Generator - Clippy

Preview of shape maker

What it does

This CSS tool can be a real time saver if you need to generate lots of shapes and can help you come up with some cool creations. It's completely free and super simple to use. Follow the instructions below to understand how to use it.


How to use it

  1. Visit the tool here.
  2. Choose the basic shape you want from the sidebar (if on desktop, if on mobile you'll see the shape options in a block below the main area).
  3. Once you've selected the basic shape you want, moves the indivdual corner nodes around to refine your shape to exactly how you need it.
  4. In the black box you'll see the CSS code starting with "clip-path: polygon". Copy and paste the code into your CSS file where it's required.


Benefits

It's completely free. It's a good time saver. If you're currently learning CSS it can also help you further understand the clip-path property and what can be made with it.


Drawbacks

Youll already need a reasonable understanding of the CSS language and how to work with it.


Other notes

There are other parts of this shape maker tool you can play around with not mentioned in the instructions. Including the image used and demo size dimensions.


Related or alternative tools
  • None yet.

Meta

Tool location: External
Cost to use: Free
Category: Web design tools