We use optional Google Analytics to understand which tools are useful and improve the site. Analytics stays off unless you accept. Privacy Policy

GetKineticHub Tools

SVG Section Divider Generator

Create responsive SVG shape dividers for smooth transitions between website sections.

Preview

1440 px wide

Preview sections

Preview only. Section colors aren’t included in the code.

Settings

Shape

Placement

Sits at the bottom of the upper section. Give Layer 1 the below section’s color for a seamless edge.

Mirrors the shape from left to right.

Geometry
100 px
60%
70%
2
Layers

Layer 1 is the front layer that meets the next section. Layers 2 and 3 sit behind it; an offset lifts a layer so it shows above the ones in front.

Layer 1Front

100%
0%

Code

SVG size: 270 B

A standalone SVG file. It stretches to fill whatever box you give it, so set its height in your layout.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none">
  <path fill="#eef4fb" d="M0,100V70C40.8,55,81.6,40,150,40C286.8,40,313.2,100,450,100C586.8,100,613.2,40,750,40C886.8,40,913.2,100,1050,100C1118.4,100,1159.2,85,1200,70V100Z"/>
</svg>

About this tool

SVG Section Divider Generator draws the shaped edge between two website sections: a wave, curve, slant, triangle, zigzag, steps or arc. Set the height, depth and shape, stack up to 3 layers, and the preview shows the divider between two sample sections as you go.

Everything runs in your browser. The output is plain SVG with no scripts or external files, usually a few hundred bytes, and you can copy it as SVG, HTML or a CSS background, or download it as a file.

How to use it

  1. Pick a preset or a shape, then choose whether the divider sits at the top or bottom of its section.
  2. Adjust the height, depth and the shape’s own settings while you watch the preview.
  3. Give Layer 1 the color of the section it blends into, and add up to two layers behind it if you want depth.
  4. Switch between Desktop, Tablet and Mobile to see how the shape stretches.
  5. Copy the SVG, HTML or CSS, or download section-divider.svg.

Common use cases

  • A wave or curve along the bottom of a hero section
  • Slanted transitions between feature, pricing and testimonial sections
  • A soft arc above a footer or call-to-action band
  • Layered dividers that add depth to a landing page
  • Section edges for WordPress themes, page builders and custom templates

Using SVG dividers responsively

The divider uses preserveAspectRatio="none", so it stretches to the full width of its container and keeps the height you set. One file fits every screen. The trade-off is that the same height across a narrower screen makes the shape steeper, and the Mobile preview shows you how much.

Place it as the last element of the upper section for Bottom placement, or the first element of the lower section for Top. To soften the shape on phones, lower its height in a media query:

@media (max-width: 600px) {
  .section-divider { height: 60px; }
}

Or let the height change smoothly with the viewport: a fluid clamp() value from CSS Clamp / Fluid Typography Generator works as the divider’s height too, so the shape eases between two sizes instead of switching at a breakpoint.

In WordPress, paste the HTML version into a Custom HTML block, a page builder’s HTML widget or a theme template. The CSS version suits a theme stylesheet or the Additional CSS panel.

Frequently asked questions

What is an SVG section divider?

A decorative shape, such as a wave, curve or slant, where one page section meets the next. Instead of a straight edge, the sections meet along the shape. It is usually filled with the color of the neighboring section, so the two blend without a seam.

Will the divider stay sharp on large screens?

Yes. SVG is vector graphics, so browsers draw it crisply at any width and pixel density. The file stays the same size however large it is shown, usually well under a few kilobytes.

Can I use the SVG in WordPress?

Yes. Paste the HTML version into a Custom HTML block, a page builder’s HTML widget or a theme template, or add the CSS version to your theme’s stylesheet or the Additional CSS panel.

Can I change the colors later?

Yes. Each layer’s color is a plain fill attribute, such as fill="#eef4fb", that you can edit in your code at any time. In the CSS version the # is encoded as %23, so the same color reads %23eef4fb.

Does the divider work responsively?

Yes. It stretches to the full width of its container and keeps the height you set. On narrow screens that makes the shape steeper, which the Mobile preview shows. To soften it on phones, lower the height in a media query.

Should I use SVG or the CSS background version?

Both draw the same divider. Inline HTML or SVG is easiest to edit and restyle later. The CSS background keeps your markup clean: all it needs is an empty element with the section-divider class.

Do screen readers announce the divider?

No. The HTML version is marked aria-hidden="true" and focusable="false" because the shape is decoration, and a CSS background is never announced. Keep text and links out of the shape itself, and check that text next to it has enough contrast with both section colors.