The CSS Shapes Generator Tool will help you easily create shapes with slider interfaces, and automatically create the HTML and CSS for you.

The shape generator allows you to modify:

• Height and width
• Padding
• Rotation
• Skew
• Positioning
• Colours
• Border

Templates

This tools starts off with a templates tab that allows you to pick a shape to use as a base which you can customise. The shapes that you can choose from the start are:

• Square
• Rectangle
• Parallelogram
• Diamond
• Trapez
• Triangle
• Circle
• Oval
• Pacman

To use any of these shapes you simply just have to click on the shape you want to use. This will change the preview shape at the top of the screen and change all the sliders to the values needed to create the selected shape.

Size

The next tab is for size, this will allow you to change the height, width and padding to create the area the exactly size you want.

There are rotate and skew sliders to change the angle of the shape.

Background

The background tab allows you to easily change the background colour of the shape your creating. Here you have the option of picking any colour you want by using the colour picker on the screen.

Border

Many of the shapes are created by changing the different border sides of the shapes, here you able to have full control over all 4 sides of the borders.

Some of the shapes need to have a transparent background to work correctly, for example the triangle shapes needs to have a bottom border and then sets the left and right borders to be transparent.

This shows how easy it is in CSS to create some shapes, just set the bottom border to be the height of the triangle with a background colour, then set the left and right borders to be half the height of the triangle with a transparent background.

.css-shapes-triangle{ 
    height: 0px; 
    width: 0px; 
    border-left: 100px solid transparent; 
    border-right: 100px solid transparent; 
    border-bottom: 200px solid #428bca; 
}

HTML & CSS

As you change the options on the tool it will automatically change the preview shape at the top of the page. This will also change the HTML and CSS in this tab, this allows you to easily copy the code into your own application to use the shape you have created.

Try the tool now and create your own CSS shapes.

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...