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

Maker avatar image


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

This is my passion project so, I create new design tools every few weeks, get updates about new tools & follow the jouney on twitter.