Shape Divider
Pick a shape, choose the edge it sits on, set the colour. Copy the HTML and CSS, or download the SVG.
It needs a live connection to CrunchCube. Check your internet connection and reload, or open the tool at crunchcube.in.
We love shapes
A sample section so you can see the divider live, sitting between two real blocks of a page.
The next section
Same colour as the divider, so the two blocks read as one continuous page.
All 14 shapes
Each shape has its own page with the code ready to copy.
How to add a divider in three steps
- Give the section that holds the divider
position: relative. - Paste the HTML as the first child (top divider) or last child (bottom divider) of that section.
- Add the CSS, and set the fill colour to the background of the neighbouring section.
Pair a divider with a soft background from Gradient Studio for a hero that doesn't look like a template.
Frequently asked questions
How do I add a shape divider to my website?
Give your section position: relative, paste the HTML inside it as the first or last child, and add the CSS to your stylesheet. The divider sits on the section's top or bottom edge.
Which colour should the divider be?
Use the background colour of the neighbouring section. A bottom divider takes the colour of the section below, so the two blocks melt together.
Will it work with WordPress, Elementor or Webflow?
Yes. The output is plain HTML and CSS. Paste the HTML in a custom HTML block and the CSS in your theme's custom CSS area.
Are the dividers free for commercial use?
Yes. Every shape and the code you copy are free for personal and commercial projects.
New games, tools and tutorials
About one short email a week. No spam, one-click unsubscribe.