Launched new shape divider generator

By Matt Visiwig Aug 19, 2024

Last month I released 120 shape dividers. This month I built a shape divider generator to output the CSS needed to use the shape dividers on your websites. It exports simple HTML and a handful of CSS rules to pull off the design.

The generator is free to use and you can pick from our selection of 40 free or 120 paid shape dividers, or input your own SVG code. I cover how to make your own custom designs in the demo video, if you’re interested.

The user interface is simple, allows you to select the top or bottom section divider and choose your shape, flip and orient it, then resize and align the proportions. When you’re ready to export, it let’s you preview the code and copy it to your clip board with the press of a button.

The exported code is based on Andrew Walpole’s CSS trick that uses masks, that way we are not required to use solid colors to pull off the shape dividers.