No signup, instant CSS

CSS Diagonal Section Divider Generator

Design an angled break between two page sections and copy the ready-to-use CSS clip-path or SVG shape.

Section one
Section two
CSS (clip-path)
SVG shape

How it works

1

Set angle and height

Drag the angle slider and set a divider height in pixels to control how steep and how tall the diagonal cut is.

2

Pick colors and direction

Choose the two section colors and whether the diagonal cuts into the top section or the bottom section.

3

Copy the CSS or SVG

Copy the generated clip-path CSS, or the equivalent SVG polygon, and paste it straight into your page.

FAQ

Does this tool upload my design anywhere?

No. Everything is generated with plain HTML, CSS and JavaScript running locally in your browser. Nothing you choose is uploaded or sent anywhere.

Can I use the SVG output instead of CSS clip-path?

Yes. The generator also outputs a plain SVG polygon with the same diagonal edge, which you can drop into a page as inline SVG, an <img>, or a background image.

Will the diagonal divider work on mobile screens?

Yes. The generated clip-path uses percentage-based points, so the diagonal scales automatically with the width of its container on any screen size.

Try other tools

CONICCSS Conic Gradient GeneratorBuild conic-gradient wheels and pies. CLIPCSS Clip Path GeneratorShape elements with clip-path visually. SHAPECSS Shape GeneratorGenerate common CSS shapes fast.