Shape dividers are stylized elements used to separate sections of a webpage. They are generally shaped in a manner that represents your brand or the message you are trying to send to the user.
There weren't many page shape divider resources for web designers out there. So I decided to create a pack for you to use.
You can download the whole pack of SVG's completely free:
Or if you want, you can first browse through all of the section dividers you're getting with the pack, and even learn how to make your own shape dividers.
Watch Video Instead:
Adding shape dividers to your website can be quite simple, depending on the platform you use.
WordPress page builders such as Divi and Elementor give you options to add the dividers as section background images.
However, for some of these page builders, you may need to convert the SVG to PNG's before uploading.
- Open the section background settings
- Add your PNG or SVG file as a background image
- Make it 'Cover' or 'Fit'
- Position it to the bottom and turn off repeat
Personally, I use Webflow, which makes the process incredibly simple.
- Add a Div Block
- Make it 100 VW
- Add a background image to the Div Block
- Position it to the bottom
If your platform does not allow you do add them as section background images, you can also paste them straight on top of your image in a photo editor such as Photoshop or Gimp.
To edit the shape dividers, you will need a program that can read SVG files.
Adobe Illustrator is probably the most popular SVG editor, but you can find some free ones as well.
To edit the files, simply open the SVG file in your program of choice and have at it.
You can change the color.
You can change the position of the points.
Or you can duplicate and add or lower opacity.
Creating SVG shape dividers for web design is actually quite easy.
If you want to create complex shapes, then it can take some time to make sure the detail is right, but it's worth it :)
You can use a PNG or SVG editor, but I recommend SVG unless what you need is only possible with PNG.
Simply open up your program of choice, take out the pen tool, and start placing points.
It's important that your points are lined up perfectly, because if they're not, it will show up funny on your website.
Use the curvature tool to make perfectly smooth rounded edges.
To make complex shapes, add an image of the shape that you're trying to imitate.
Add a new layer on top of the image, and place points outlining the image.
Boom! You now have a Digital Red Panther shape divider. (I made some adjustments from the image above.)