CSS shapes

A collection of lightweight css shapes

How to use CSS shapes?

These CSS shapes are created in a square bounding box. The shapes are created using the CSS border property. Simply copy and paste the CSS code to the style or class of an element with N x N dimention eg. 500px x 500px

The CSS shapes are lightweight than an svg or an image. Make your shapes stand out by adding image or a gradient to it


Hey, I'm Dilpreet, the maker of Super Designer. I'm building design tools to make designing fun for everyone

I create new design tools every few weeks, get updates about new tools. Follow the jouney on twitter. Checkout more design tools here
Get updated about new tools
Maker avatar image
© Super designer