Free tool · HTML, CSS & SVG
Section Divider Generator
Swap the straight lines between your page sections for waves, curves and angles. Copy the code, paste it in, done.
HTML
CSS
Want the whole page to look this good?
Get a website with a layout that flows.
Dividers are a detail. I design and build complete websites with clear sections, strong headlines and calls to action that turn visitors into enquiries.
Tips for section dividers
- Use one style per page. Mixing waves, slants and zigzags looks busy.
- Keep them short on phones: the CSS halves the height on small screens so content stays close together.
- Match the colours exactly: the divider's colours must be the same as the two sections it joins, or a thin line shows.
Frequently asked questions
What is a section divider?
A section divider (or shape divider) is a wave, curve or angled edge between two parts of a page. It replaces the hard straight line between sections and makes a layout feel more designed.
How do I add the divider to my website?
Paste the HTML between the two sections, and the CSS into your stylesheet (or WordPress Additional CSS). The divider stretches to the full width of the page and gets shorter on phones.
Can I use this in Elementor?
Yes. Download the SVG and paste the HTML into an HTML widget placed between two sections, or upload the SVG as a custom shape divider if your Elementor setup allows it.
Will it slow my page down?
No. The divider is a few hundred bytes of inline SVG: no image download, and it stays sharp on every screen.
More design tools
Color Palette & Contrast Checker
Build colour palettes from one colour or a photo, and check text contrast against WCAG.
Social Share Image Maker
Design 1200×630 share images for Facebook, LinkedIn and X, plus Instagram sizes.
Image Cropper
Crop, rotate and flip images to any shape, with presets for social media.
CSS Gradient Generator
Create linear, radial and conic gradients visually and copy the CSS.
Blob & Shape Generator
Make organic blobs, stars, rounded polygons and flowers. Download SVG or PNG, or copy the CSS.
CSS Clip-path Generator
Cut images and boxes into any shape by dragging points, with presets and copy-ready CSS.
Box Shadow Generator
Design soft, layered, glow and neumorphism shadows and copy the CSS.
CSS Button Generator
Design buttons with colours, gradients, borders and hover effects. Copy the HTML and CSS.
SVG Optimizer
Shrink SVG files from Illustrator, Figma or Inkscape, with a before and after preview.
Favicon from Text or Emoji
Make a favicon from your initials or an emoji, with ICO, SVG and PNG files.
Logo Badge & Seal Maker
Design round, shield, hexagon and seal badges with your text. Download PNG or SVG.