Skip to main content
iotools.cloudiotools.cloud

CSS Section Divider Generator

Generate a decorative section-edge divider — slant, curve, triangle, arrow/split, book-page curl, or scalloped clouds — from a chosen shape and colour. Copy the SVG, a CSS background-image snippet, or ready-to-paste HTML. Runs entirely in your browser.

Input

How far the diagonal edge drops, as a percentage of the height.

Dimensions

Transform

Fill

Background

Output

SVG code
Preview

Your divider will appear here.

CSS background
HTML snippet
Was this helpful?

Guides

The CSS Section Divider Generator builds the shaped section edges you see breaking up hero sections, footers and content blocks on modern landing pages — a slant, a single curve, a triangle, an arrow/split notch, a curled book-page corner, or a row of scalloped clouds. It hands you the result three ways: the raw SVG, a CSS background-image snippet, and a ready-to-paste HTML block. Every shape is real vector geometry, so it stays sharp at any size.

How to use it

  1. Pick a shape — slant, curve, triangle/wedge, arrow/split, book-page curl, or clouds.
  2. Adjust that shape's own control (slant depth, curve depth, peak position and height, notch depth, curl size, or bump count and height).
  3. Set the width and height of the canvas.
  4. Flip the shape vertically (to hang from the top of a section instead of sitting at the bottom) or horizontally (to mirror slants, peaks and the book-page curl to the other side).
  5. Choose a fill colour and opacity, and a background colour. Copy whichever output you need — the preview updates as you go.

The three outputs

  • SVG code — a self-contained <svg> you can drop straight into your markup or save as a .svg file. The background colour is baked in as a <rect>, so the file looks identical wherever you open it.
  • CSS background — the same shape URL-encoded into a background-image: url("data:image/svg+xml,…") rule, ready to attach to any element as a decorative divider.
  • HTML snippet — a <div> wrapper with the inline SVG, for pasting into a page without touching your stylesheet.

How do I put the divider at the top of a section instead of the bottom?

Turn on Flip vertical. Every shape is drawn to sit at the bottom edge of its box by default; flipping mirrors the filled area so the same shape hangs from the top edge instead — no separate "position" setting needed.

Will these shapes scale without blurring?

Yes. Everything is vector path data with preserveAspectRatio="none", so the shape stretches to fill whatever width you place it at — from a phone to an ultra-wide monitor — with no loss of quality.

What if I want a wavy divider instead?

This tool covers the straight-edged and curved shape families. For a wavy, undulating divider — sine, zigzag, rounded hills, layered waves, or an organic blob — use the SVG Wave Generator, its sibling tool built on the same SVG/CSS/HTML output contract.

Privacy

The generator runs entirely in your browser. Your colours, dimensions and every other setting stay on your device — nothing is uploaded, and no shape is ever sent to a server.

section divider generatorwave divider alternativeslant divider csspage curl svgcloud divider svghero shape dividersvg background shapefooter divider css

Use it from code

From 3 credits per call

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-section-divider-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "shapeType": "slant",
    "slantDepth": "50",
    "width": "1200",
    "height": "200",
    "fillColor": "#464aff",
    "fillOpacity": "100",
    "bgColor": "#f5f5f5"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `css-section-divider-generator` tool (CSS Section Divider Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads