CSS Zigzag Generator

This CSS zigzag generator creates responsive zigzag dividers with an inline SVG background. Adjust width, height, color, gradient, peak count, peak height, direction, and vertex position, then copy the generated CSS or download the SVG.

Shape

Size

Width px

Height px

Responsive

Color

Border Width: {{ strokeWidth }}px

Zigzag

Peaks: {{ peakCount }}

Height: {{ peakHeight }}px

Vertex: {{ vertexPosition }}%

Horizontal Shift: {{ shift }}%

Show Guide

Minify

Background

Preview {{ safeWidth }} x {{ safeHeight }} px

CSS

SVG