Free Web Design Shape Dividers Pack [50+ Dividers]

By:
Karr Fager
Published:
June 1, 2020
Updated:
June 19, 2020
Share

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.

1. Dividers Included in the Pack

2. How to Add the Dividers to Your Website

3. How to Edit a Divider

4. How to Make Custom Page Dividers Yourself

Watch Video Instead:

Slant

slant-divider

Wavy Loops

round loops divider

Half Sphere

circle divider

Triangle Dent

triangle divider

Basic Triangle

big triangle divider

Triangle Uneven

triangle uneven page divider

Side Triangle

side triangle shape divider

Small Triangles

small triangles divider

Slant Down

slant down divider

Slant Up

slant up divider

Big Round

big round page divider

Wavy Motion

wavy loops page shape divider

Sharp Slants

sharp slants shape divider

Faded Slant

faded slant divider

Faded Triangle

faded triangle page divider

Tri Triangle

faded triangle page divider

Clouds

clouds shape page divider

Faded Clouds

faded clouds page divider

Bubbles

bubbles page shape divider

Rough Edges

rough edges page divider

Wavy Dashed

dashed loops shape divider

Iceberg

iceberg shape divider

Paint Drip

paint dripping page divider

Three Triangles

three triangles page separator

Pyramid

pyramid page separator

Christmas Trees

christmas page divider

Book

book page divider

Mountain

mountain section divider

Fire

fire svg page divider

Snowflakes

snowflake page divider

Fall Leaves

fall leaves page divider

Music Notes

music note page divider

Sharp Paper

sharp paper page divider shape

Shredded Paper

shredded paper page divider

Paint Brush

paint brush divider

City Skyline

city skyline

Adding shape dividers to your website can be quite simple, depending on the platform you use.

Using WordPress

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

add divider as background image

Using Webflow

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

page divider in webflow

shape divider settings

Using Photoshop

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.

add page divider in photoshop

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.

edit divider color

You can change the position of the points.

edit divider position

Or you can duplicate and add or lower opacity.

low opacity page separator

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.

svg vector page divider

It's important that your points are lined up perfectly, because if they're not, it will show up funny on your website.

bad divider example

Use the curvature tool to make perfectly smooth rounded edges.

adding curvature points in illustrator

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.

making an animal shape divider

Boom! You now have a Digital Red Panther shape divider. (I made some adjustments from the image above.)

example of animal divider

About the Author:
Karr Fager
Karr is the owner and digital marketer of Digital Red Panther, providing sleek online marketing services for small business.
Share
Keep Learning About Web Design + SEO